/* =============================================================================
 * Design Tokens — generated from Figma "Assets" (Color Styles, Typography,
 * Breakpoints). Single source of truth for colors, type scale, weights and
 * spacing. Served statically via express.static('public').
 *
 * Usage:  <link rel="stylesheet" href="/css/design-tokens.css">
 *         color: var(--color-content-primary);
 *         font-size: var(--font-size-body);
 * ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
   * Color — Content (foreground)
   * ------------------------------------------------------------------------ */
  --color-content-primary: #ffffff;   /* Content Primary   */
  --color-content-secondary: #b8b8b8; /* Content Secondary */
  --color-content-tertiary: #717171;  /* Content Tertiary  */
  --color-content-accent: #96855a;    /* Content Accent    */

  /* ---------------------------------------------------------------------------
   * Color — Surfaces / background
   * ------------------------------------------------------------------------ */
  --color-page-background: #161616;   /* Page Background   */
  --color-card-background: #151515;   /* Card Background   */
  --color-prop-background: #202020;   /* Prop Background   */
  --color-container-border: #2e2e2e;  /* Container Border  */

  /* ---------------------------------------------------------------------------
   * Color — Accent gradient (Text Gradient Primary)
   * ------------------------------------------------------------------------ */
  --color-gradient-primary: #c1b057;              /* Text Gradient Primary */
  --gradient-primary: linear-gradient(90deg, #c1b057 0%, #96855a 100%);

  /* ---------------------------------------------------------------------------
   * Typography — font families
   * (Inter is already loaded app-wide; mono used for Caption/Small tokens.)
   * ------------------------------------------------------------------------ */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;

  /* ---------------------------------------------------------------------------
   * Typography — font weights
   * ------------------------------------------------------------------------ */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* ---------------------------------------------------------------------------
   * Typography — font sizes (raw scale, px)
   * ------------------------------------------------------------------------ */
  --font-size-12: 0.75rem;   /* 12 — Small          */
  --font-size-13: 0.8125rem; /* 13 — Caption        */
  --font-size-14: 0.875rem;  /* 14 — Footnote       */
  --font-size-16: 1rem;      /* 16 — Body           */
  --font-size-18: 1.125rem;  /* 18 — Body Large     */
  --font-size-20: 1.25rem;   /* 20 — Headline       */
  --font-size-24: 1.5rem;    /* 24 — Heading 5      */
  --font-size-28: 1.75rem;   /* 28 — Mobile H3      */
  --font-size-30: 1.875rem;  /* 30 — Heading 4      */
  --font-size-40: 2.5rem;    /* 40 — Heading 3      */
  --font-size-50: 3.125rem;  /* 50 — Heading 2      */
  --font-size-60: 3.75rem;   /* 60 — Heading 1      */

  /* Semantic aliases — Desktop scale */
  --font-size-heading-1: var(--font-size-60);
  --font-size-heading-2: var(--font-size-50);
  --font-size-heading-3: var(--font-size-40);
  --font-size-heading-4: var(--font-size-30);
  --font-size-heading-5: var(--font-size-24);
  --font-size-headline: var(--font-size-20);
  --font-size-body-large: var(--font-size-18);
  --font-size-body: var(--font-size-16);
  --font-size-footnote: var(--font-size-14);
  --font-size-caption: var(--font-size-13);
  --font-size-small: var(--font-size-12);

  /* Semantic aliases — Mobile heading scale */
  --font-size-mobile-heading-1: var(--font-size-40);
  --font-size-mobile-heading-2: var(--font-size-30);
  --font-size-mobile-heading-3: var(--font-size-28);
  --font-size-mobile-heading-4: var(--font-size-24);

  /* ---------------------------------------------------------------------------
   * Typography — line heights
   * ------------------------------------------------------------------------ */
  --line-height-tight: 1.1;   /* large headings   */
  --line-height-heading: 1.2; /* small headings   */
  --line-height-snug: 1.4;    /* headline / lead  */
  --line-height-normal: 1.5;  /* body copy        */

  /* ---------------------------------------------------------------------------
   * Spacing scale (4px base)
   * ------------------------------------------------------------------------ */
  --space-0: 0;
  --space-1: 0.25rem; /* 4  */
  --space-2: 0.5rem;  /* 8  */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem;    /* 16 */
  --space-5: 1.25rem; /* 20 */
  --space-6: 1.5rem;  /* 24 */
  --space-8: 2rem;    /* 32 */
  --space-10: 2.5rem; /* 40 */
  --space-12: 3rem;   /* 48 */
  --space-16: 4rem;   /* 64 */
  --space-20: 5rem;   /* 80 */
  --space-24: 6rem;   /* 96 */

  /* ---------------------------------------------------------------------------
   * Radii
   * ------------------------------------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px; /* pills */

  /* ---------------------------------------------------------------------------
   * Breakpoints (reference values; use in @media, see below)
   * ------------------------------------------------------------------------ */
  --breakpoint-mobile: 375px;
  --breakpoint-switch-tablet: 600px;  /* mobile → tablet switch  */
  --breakpoint-tablet: 768px;
  --breakpoint-desktop-min: 1024px;
  --breakpoint-switch-desktop: 1280px; /* tablet → desktop switch */
  --breakpoint-desktop: 1440px;

  /* ---------------------------------------------------------------------------
   * Aliases — Figma-aligned names that map onto the canonical tokens above, so
   * either naming scheme resolves (e.g. --color-surface-card == card bg).
   * ------------------------------------------------------------------------ */
  --color-surface-page: var(--color-page-background);
  --color-surface-card: var(--color-card-background);
  --color-surface-prop: var(--color-prop-background);
  --color-surface-border: var(--color-container-border);
  --radius-4: var(--radius-sm);
  --radius-8: var(--radius-md);
  --radius-12: var(--radius-lg);
  --radius-16: var(--radius-xl);
}

/* -----------------------------------------------------------------------------
 * Responsive type: below the tablet switch (600px) headings step down to the
 * Mobile scale so H1–H4 track the Figma "Mobile" column.
 * -------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
  :root {
    --font-size-heading-1: var(--font-size-mobile-heading-1); /* 40 */
    --font-size-heading-2: var(--font-size-mobile-heading-2); /* 30 */
    --font-size-heading-3: var(--font-size-mobile-heading-3); /* 28 */
    --font-size-heading-4: var(--font-size-mobile-heading-4); /* 24 */
  }
}