/* ============================================================
   variables.css
   Design tokens for Almenry.
   Mirrors the React Native app theme exactly.
   Change values here, the entire site adapts.
   ============================================================ */

:root {
  /* ============================================================
     COLORS — LIGHT MODE (default)
     Matches src/theme/colors.ts in the app.
     ============================================================ */

  --color-bg: #ece6d8;             /* page background — warm cream */
  --color-surface: #f5f0e2;        /* slightly lighter — cards */
  --color-surface-alt: #e3dccb;    /* alternate surface */

  --color-text: #1c1814;           /* deep brown ink — primary text */
  --color-text-muted: #6e6557;     /* warm muted — secondary text */
  --color-text-faint: #a39785;     /* faint — footnotes, hints */

  --color-border: #cdc4b0;         /* hairline borders */
  --color-border-strong: #1c1814;  /* strong dividers, ink rules */

  /* Link colors — ink-only, no accent */
  --color-link: #1c1814;
  --color-link-hover: #6e6557;


  /* ============================================================
     TYPOGRAPHY
     Source Serif 4 and JetBrains Mono — loaded from Google Fonts.
     ============================================================ */

  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', Times, serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* Font sizes — match the app's typography scale */
  --text-monosmall: 0.5625rem;    /* 9px  — monoSmall */
  --text-mono: 0.625rem;           /* 10px — mono and eyebrow */
  --text-italic: 0.875rem;         /* 14px — italic body */
  --text-body: 0.9375rem;          /* 15px — body */
  --text-bodylarge: 1.0625rem;     /* 17px — bodyLarge */
  --text-h2: 1.5rem;               /* 24px — h2 */
  --text-h1: 2rem;                 /* 32px — h1 */

  /* Larger sizes for web-specific contexts (landing hero, etc.) */
  --text-hero: 3rem;               /* 48px — hero headlines on web */
  --text-display: 3.5rem;          /* 56px — display headlines on web */

  /* Font weights */
  --weight-regular: 400;
  --weight-bold: 700;

  /* Line heights (matching the app's pixel-based line-height to ratios) */
  --leading-h1: 1.125;     /* 36/32 */
  --leading-h2: 1.166;     /* 28/24 */
  --leading-body: 1.467;   /* 22/15 */
  --leading-bodylarge: 1.412; /* 24/17 */
  --leading-italic: 1.5;   /* 21/14 */
  --leading-hero: 1.05;
  --leading-display: 1.05;

  /* Letter spacing (from the app's typography) */
  --tracking-h1: -0.5px;
  --tracking-h2: -0.4px;
  --tracking-eyebrow: 1.8px;
  --tracking-mono: 1.4px;
  --tracking-monosmall: 1.6px;
  --tracking-display: -1px;


  /* ============================================================
     SPACING
     8px base scale — matches the app's spacing rhythm.
     ============================================================ */

  --space-1: 0.25rem;     /* 4px */
  --space-2: 0.5rem;      /* 8px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px — common app spacing */
  --space-6: 1.5rem;      /* 24px */
  --space-7: 2rem;        /* 32px */
  --space-8: 3rem;        /* 48px */
  --space-9: 4rem;        /* 64px */
  --space-10: 6rem;       /* 96px */


  /* ============================================================
     LAYOUT
     ============================================================ */

  --max-width-narrow: 480px;
  --max-width-default: 540px;
  --max-width-wide: 720px;
  --max-width-page: 1200px;

  --border-thin: 1px;
  --border-thick: 2px;


  /* ============================================================
     TRANSITIONS
     ============================================================ */

  --transition-fast: 150ms ease-out;
  --transition-base: 250ms ease-out;
  --transition-slow: 400ms ease-out;
}


/* ============================================================
   DARK MODE
   Activates automatically based on user's OS preference.
   Matches the app's dark theme exactly.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #15110d;
    --color-surface: #1d1813;
    --color-surface-alt: #241e17;

    --color-text: #e8dcc4;
    --color-text-muted: #9c8d72;
    --color-text-faint: #665a47;

    --color-border: #3a3127;
    --color-border-strong: #e8dcc4;

    --color-link: #e8dcc4;
    --color-link-hover: #9c8d72;
  }
}