/* tokens.css — design system foundation for roi.mt
 *
 * Direction: Mediterranean editorial. Limestone parchment ground, charcoal ink,
 * sienna sun. Architectural fine line work, generous margins, and numbers that
 * carry weight like data in a serious publication.
 *
 * Type pairing: DM Serif Display (display) + DM Sans (body) + JetBrains Mono (data).
 * The display face brings Mediterranean warmth via its ink-trap details and
 * optical serif weight; the body face holds the page with geometric calm.
 *
 * Palette intent: Parchment + deep charcoal ink + amber/sienna accent + sea-blue
 * second voice. Inspired by Maltese limestone in afternoon light. Deliberately
 * avoids fintech-blue and eco-green.
 *
 * Core contrast: --color-text on --color-bg ≈ 16:1 (WCAG AAA)
 * Accent on bg: --color-accent (#C4622D) on --color-bg (#FAF8F3) ≈ 4.8:1 (WCAG AA)
 */

:root {
  /* Type scale — 1.250 ratio, base 17px */
  --font-size-xs:   0.64rem;   /* ~10.9px */
  --font-size-sm:   0.8rem;    /* ~13.6px */
  --font-size-base: 1rem;      /* 17px    */
  --font-size-lg:   1.25rem;   /* ~21.3px */
  --font-size-xl:   1.563rem;  /* ~26.6px */
  --font-size-2xl:  1.953rem;  /* ~33.2px */
  --font-size-3xl:  2.441rem;  /* ~41.5px */
  --font-size-4xl:  3.052rem;  /* ~51.9px */
  --font-size-5xl:  3.815rem;  /* ~64.9px — editorial display */

  --line-height-tight:  1.05;
  --line-height-snug:   1.2;
  --line-height-normal: 1.55;
  --line-height-loose:  1.75;

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Spacing — 4px base grid: 4-8-12-16-24-32-48-64-96-128 */
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* Color palette — limestone ground, charcoal ink, sienna sun, sea ink */
  --color-bg:           #FAF6EE;  /* warm limestone parchment              */
  --color-bg-deep:      #F4EEE0;  /* one stop darker for layering          */
  --color-surface:      #FFFFFF;  /* pure white card surface               */
  --color-surface-warm: #FDF4EC;  /* warm tinted surface for lead capture  */
  --color-text:         #1C1917;  /* deep charcoal — near-black ink        */
  --color-text-muted:   #6B6560;  /* mid warm grey                         */
  --color-text-faint:   #9A938B;  /* faintest copy / metadata              */
  --color-accent:       #C4622D;  /* sienna/amber — Mediterranean sun      */
  --color-accent-deep:  #9A4818;  /* burnt sienna for depth                */
  --color-accent-soft:  #F5E6D8;  /* pale terracotta wash                  */
  --color-sea:          #2E4A5C;  /* deep Mediterranean ink — second voice */
  --color-success:      #2D7A4F;  /* forest green — confident, not neon    */
  --color-border:       #E8E2D9;  /* warm light grey                       */
  --color-border-hover: #C4B8AB;  /* border hover state                    */
  --color-rule:         #1C1917;  /* hairline rule colour, full ink        */

  /* Radii */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* Shadows — warm-tinted to match the palette */
  --shadow-xs: 0 1px 1px rgba(28, 25, 23, 0.03);
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 4px 16px rgba(28, 25, 23, 0.07);
  --shadow-lg: 0 12px 40px rgba(28, 25, 23, 0.10);
  --shadow-xl: 0 24px 60px -12px rgba(28, 25, 23, 0.18);
  --shadow-glow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent);

  /* Animation */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:  180ms;
  --duration-base:  280ms;
  --duration-slow:  480ms;
  --duration-page:  720ms;

  /* Layout */
  --max-width-prose:   65ch;
  --max-width-content: 1180px;
  --max-width-wide:    1320px;

  /* Decorative */
  --hairline: 1px solid var(--color-border);
  --rule:     1px solid var(--color-rule);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:  0ms;
    --duration-base:  0ms;
    --duration-slow:  0ms;
    --duration-page:  0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}