/* Automate the Cloud — design tokens
 * Generated from the brand kit. Light is the primary mode.
 * Dark mode activates on [data-theme="dark"] or via prefers-color-scheme.
 */


:root {
  --atc-surface: #F9FBFA;
  --atc-card: #FFFFFF;
  --atc-ink: #0E1A18;
  --atc-slate: #586B67;
  --atc-brand: #1D9E75;
  --atc-action: #0B6B52;
  --atc-on-action: #FFFFFF;
  --atc-tint: #DCF2EA;
  --atc-tint-text: #074A3B;
  --atc-success: #2F7D3B;
  --atc-warning: #9A6210;
  --atc-error: #A32D2D;
  --atc-line: rgba(14,26,24,0.13);
  --atc-line-strong: rgba(14,26,24,0.24);

  --atc-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --atc-font-sans: "Space Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;
  --atc-font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --atc-size-display: 40px;
  --atc-size-h2: 26px;
  --atc-size-h3: 19px;
  --atc-size-h4: 15px;
  --atc-size-body: 16px;
  --atc-size-small: 13.5px;
  --atc-size-label: 12px;
  --atc-size-code: 13.5px;
  --atc-size-quote: 19px;
  --atc-leading-tight: 1.15;
  --atc-leading-body: 1.6;
  --atc-leading-snug: 1.4;
  --atc-track-display: -0.015em;
  --atc-track-label: 0.06em;
  --atc-weight-regular: 400;
  --atc-weight-medium: 500;
  --atc-weight-semibold: 600;

  --atc-space-1: 4px;
  --atc-space-2: 8px;
  --atc-space-3: 12px;
  --atc-space-4: 16px;
  --atc-space-5: 24px;
  --atc-space-6: 32px;
  --atc-space-7: 48px;
  --atc-space-8: 64px;
  --atc-space-9: 96px;
  --atc-radius-sm: 6px;
  --atc-radius-md: 8px;
  --atc-radius-lg: 12px;
  --atc-radius-pill: 999px;
}

[data-theme="dark"] {
  --atc-surface: #0B1513;
  --atc-card: #101C19;
  --atc-ink: #E6EEEC;
  --atc-slate: #8FA39D;
  --atc-brand: #1D9E75;
  --atc-action: #45CFA5;
  --atc-on-action: #0B1513;
  --atc-tint: #0F3A30;
  --atc-tint-text: #A8E6D2;
  --atc-success: #4CC26A;
  --atc-warning: #E0A040;
  --atc-error: #F07C7C;
  --atc-line: rgba(255,255,255,0.14);
  --atc-line-strong: rgba(255,255,255,0.26);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --atc-surface: #0B1513;
    --atc-card: #101C19;
    --atc-ink: #E6EEEC;
    --atc-slate: #8FA39D;
    --atc-brand: #1D9E75;
    --atc-action: #45CFA5;
    --atc-on-action: #0B1513;
    --atc-tint: #0F3A30;
    --atc-tint-text: #A8E6D2;
    --atc-success: #4CC26A;
    --atc-warning: #E0A040;
    --atc-error: #F07C7C;
    --atc-line: rgba(255,255,255,0.14);
    --atc-line-strong: rgba(255,255,255,0.26);
  }
}

/* Base application of the type system */
body {
  background: var(--atc-surface);
  color: var(--atc-ink);
  font-family: var(--atc-font-sans);
  font-size: var(--atc-size-body);
  line-height: var(--atc-leading-body);
}
h1, h2, h3, h4, .atc-wordmark, .atc-label {
  font-family: var(--atc-font-mono);
  font-weight: var(--atc-weight-semibold);
  letter-spacing: var(--atc-track-display);
  line-height: var(--atc-leading-tight);
}
h1 { font-size: var(--atc-size-display); }
h2 { font-size: var(--atc-size-h2); }
h3 { font-size: var(--atc-size-h3); }
h4 { font-size: var(--atc-size-h4); }
code, pre, .atc-tabular {
  font-family: var(--atc-font-mono);
  font-variant-numeric: tabular-nums;
}
.atc-label {
  font-size: var(--atc-size-label);
  letter-spacing: var(--atc-track-label);
  text-transform: uppercase;
  font-weight: var(--atc-weight-medium);
}
blockquote {
  font-family: var(--atc-font-serif);
  font-size: var(--atc-size-quote);
  line-height: var(--atc-leading-snug);
  border-left: 3px solid var(--atc-brand);
  margin: var(--atc-space-5) 0;
  padding-left: var(--atc-space-4);
  color: var(--atc-ink);
}
blockquote cite {
  display: block;
  font-family: var(--atc-font-sans);
  font-style: normal;
  font-size: var(--atc-size-small);
  color: var(--atc-slate);
  margin-top: var(--atc-space-2);
}
a { color: var(--atc-action); }
:focus-visible { outline: 2px solid var(--atc-action); outline-offset: 2px; }