/* SYNCED COPY — do not hand-edit. Source of truth: docs/brand/tokens.css (PEN-4).
   Re-synced at deploy time by deploy/site/build-site-configmap.sh. */
/* ============================================================================
 * Penstock — Design Tokens (framework-agnostic)
 * Source of truth: DESIGN.md Control Room system; legacy scales retained for older surfaces.
 *
 * Plain CSS custom properties so they drop into any surface as-is. The backend
 * stack is settled (docs/TECH-STACK.md, backend-only today); no customer-facing
 * UI framework is chosen yet. When one is, map these into that framework's theme
 * (e.g. Tailwind `theme.extend`, CSS-in-JS theme object, or a tokens pipeline).
 * Do not hand-edit values in two places — change DESIGN.md, then here.
 * ========================================================================== */

:root {
  /* --- Brand scales ------------------------------------------------------- */

  /* Control Room tokens from DESIGN.md */
  --pen-vellum: #f6f1e8;
  --pen-vellum-strong: #ece3d4;
  --pen-paper: #fffdf8;
  --pen-panel: #151515;
  --pen-panel-raised: #1f1d1a;
  --pen-ink: #171615;
  --pen-muted: #67615a;
  --pen-subtle: #91887d;
  --pen-border: #d8cdbd;
  --pen-border-strong: #afa391;
  --pen-arc-blue: #3d5bff;
  --pen-arc-blue-hover: #2c46e0;
  --pen-arc-blue-soft: #e2e7ff;
  --pen-lamp-flowing: #1f7a4d;
  --pen-lamp-refresh: #b66b00;
  --pen-lamp-tripped: #c7352b;

  /* Hydro Teal — legacy brand scale retained for older surfaces */
  --pen-teal-50: #e6faf6;
  --pen-teal-100: #c4f2e9;
  --pen-teal-200: #92e4d6;
  --pen-teal-300: #57d0bf;
  --pen-teal-400: #28b5a4;
  --pen-teal-500: #0e9c8d; /* brand display color */
  --pen-teal-600: #0b7e73; /* solid fills w/ white text — AA at >=16px */
  --pen-teal-700: #0c645c; /* solid fills w/ white text — AA at any size */
  --pen-teal-800: #0e4f49;
  --pen-teal-900: #0e403c;

  /* Pressure Navy — secondary / "depth & head" */
  --pen-navy-50: #eaf0f8;
  --pen-navy-100: #ccdbee;
  --pen-navy-200: #9fbbdd;
  --pen-navy-300: #6e94c6;
  --pen-navy-400: #3e6ca8;
  --pen-navy-500: #1d4e89;
  --pen-navy-600: #173e6e;
  --pen-navy-700: #122f54;
  --pen-navy-800: #0e2440;
  --pen-navy-900: #0a1a2e;

  /* Current Gold — accent / "energy", use sparingly. Always pair with INK text. */
  --pen-gold-50: #fff6e5;
  --pen-gold-100: #fde9bf;
  --pen-gold-200: #fad489;
  --pen-gold-300: #f7be52;
  --pen-gold-400: #f5a623; /* brand accent */
  --pen-gold-500: #e8910c;
  --pen-gold-600: #c2740a;

  /* Ink / Slate — cool neutral, dark-mode native */
  --pen-ink-0: #ffffff;
  --pen-ink-50: #f7f9fa;
  --pen-ink-100: #eef2f4;
  --pen-ink-200: #dce3e7;
  --pen-ink-300: #b9c4cb;
  --pen-ink-400: #8a99a3; /* large/decorative text only — below AA for body on white */
  --pen-ink-500: #61707a; /* muted/secondary text on white — AA */
  --pen-ink-600: #46535c;
  --pen-ink-700: #313c44;
  --pen-ink-800: #1e262c;
  --pen-ink-900: #121a1f; /* primary text / ink */
  --pen-ink-950: #0b1115; /* darkest surface */

  /* Semantic */
  --pen-success-500: #18a06b;
  --pen-success-600: #0f7d53;
  --pen-warning-500: #e0790f; /* caution — distinct from brand gold accent */
  --pen-warning-600: #b85f09;
  --pen-error-500: #e5484d;
  --pen-error-600: #c5363b;
  --pen-info-500: #0e9c8d; /* reuse teal for informational */

  /* --- Semantic aliases (light theme default) ----------------------------- */
  --color-brand: var(--pen-arc-blue);
  --color-brand-strong: var(--pen-arc-blue-hover);
  --color-accent: var(--pen-arc-blue);
  --color-bg: var(--pen-vellum);
  --color-bg-subtle: var(--pen-vellum-strong);
  --color-surface: var(--pen-paper);
  --color-surface-raised: #ffffff;
  --color-border: var(--pen-border);
  --color-text: var(--pen-ink);
  --color-text-muted: var(--pen-muted);
  --color-text-inverse: #f8f4ec;
  --color-link: var(--pen-arc-blue-hover);
  --color-focus-ring: var(--pen-arc-blue);
  --color-success: var(--pen-lamp-flowing);
  --color-warning: var(--pen-lamp-refresh);
  --color-error: var(--pen-lamp-tripped);

  /* Signature gradient — "the channel" */
  --pen-gradient-flow: linear-gradient(
    135deg,
    var(--pen-teal-500) 0%,
    var(--pen-teal-600) 55%,
    var(--pen-navy-700) 100%
  );

  /* --- Typography --------------------------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-display: 3rem; /* 48px */
  --text-h1: 2.25rem; /* 36px */
  --text-h2: 1.875rem; /* 30px */
  --text-h3: 1.5rem; /* 24px */
  --text-h4: 1.25rem; /* 20px */
  --text-lg: 1.125rem; /* 18px */
  --text-base: 1rem; /* 16px */
  --text-sm: 0.875rem; /* 14px */
  --text-xs: 0.8125rem; /* 13px */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: 0;
  --tracking-normal: 0;
  --tracking-wide: 0.04em; /* eyebrows / labels, uppercase */

  /* --- Spacing (4px base) ------------------------------------------------- */
  --space-xs: 0.25rem; /* 4 */
  --space-sm: 0.5rem; /* 8 */
  --space-md: 1rem; /* 16 */
  --space-lg: 1.5rem; /* 24 */
  --space-xl: 2rem; /* 32 */
  --space-2xl: 3rem; /* 48 */
  --space-3xl: 4rem; /* 64 */

  /* --- Radius / elevation / motion --------------------------------------- */
  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 4px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 0 rgba(23, 22, 21, 0.06);
  --shadow-md: 0 8px 24px rgba(23, 22, 21, 0.08);
  --shadow-lg: 0 18px 48px rgba(23, 22, 21, 0.12);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* --- Breakpoints (reference) ------------------------------------------- */
  --bp-mobile: 0px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1280px;
}

/* --- Dark theme (dark-mode native; this is the product's home surface) ---- */
:root[data-theme="dark"],
.theme-dark {
  --color-brand: var(--pen-teal-400);
  --color-brand-strong: var(--pen-teal-300);
  --color-accent: var(--pen-gold-400);
  --color-bg: var(--pen-ink-950);
  --color-bg-subtle: var(--pen-ink-900);
  --color-surface: var(--pen-ink-900);
  --color-surface-raised: var(--pen-ink-800);
  --color-border: var(--pen-ink-700);
  --color-text: var(--pen-ink-50);
  --color-text-muted: var(--pen-ink-300);
  --color-text-inverse: var(--pen-ink-950);
  --color-link: var(--pen-teal-300);
  --color-focus-ring: var(--pen-teal-400);
  --color-success: var(--pen-success-500);
  --color-warning: var(--pen-warning-500);
  --color-error: var(--pen-error-500);
}