/* ==========================================================================
   Arixo Design — Design Tokens
   Per .design-brief.md. Never use literal values in components — always tokens.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     Color — warm-biased, never cool grays
     -------------------------------------------------------------------- */

  /* Brand — bronze / copper. Historical, non-negotiable. */
  --color-brand: #a97e72;
  --color-brand-deep: #8a6359;
  --color-brand-light: #c9a394;
  --color-brand-wash: #e8dcd4;

  /* Marginalia — deep forest, used sparingly in labels/kickers */
  --color-marginalia: #3d4a3a;

  /* Surfaces — warm, never pure #fff or #000 */
  --color-paper: #f5f1ec;         /* primary light surface (bone) */
  --color-paper-deep: #ebe4da;    /* elevated / sunken */
  --color-ink-surface: #161310;   /* dark section surface (warm black) */
  --color-ink-surface-elevated: #1f1b17;

  /* Ink — warm black, not pure */
  --color-ink: #1a1714;
  --color-ink-secondary: #605952;
  --color-ink-tertiary: #6e665d;  /* darkened from #8b8378 to meet WCAG AA on paper bg */
  --color-ink-on-dark: #ece5dc;
  --color-ink-on-dark-secondary: #a8a097;
  --color-ink-on-dark-tertiary: #8e867c;  /* lifted from #716a61 to ~4.6:1 on ink-surface for WCAG AA */

  /* Rules / hairlines */
  --color-rule: rgba(26, 23, 20, 0.12);
  --color-rule-strong: rgba(26, 23, 20, 0.28);
  --color-rule-on-dark: rgba(236, 229, 220, 0.14);
  --color-rule-on-dark-strong: rgba(236, 229, 220, 0.32);

  /* Semantic */
  --color-focus: var(--color-brand);

  /* --------------------------------------------------------------------
     Typography — three families max, variable fonts preferred
     -------------------------------------------------------------------- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-ui: 'Instrument Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — editorial ratio ~1.333, fluid for responsive */
  --size-xs: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);    /* 11-12px  — micro labels */
  --size-sm: clamp(0.8125rem, 0.78rem + 0.14vw, 0.875rem);   /* 13-14px  — captions */
  --size-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);       /* 16-18px  — body */
  --size-md: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);    /* 18-21px  — lead body */
  --size-lg: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);          /* 24-32px  — h3 */
  --size-xl: clamp(1.875rem, 1.6rem + 1.4vw, 2.75rem);       /* 30-44px  — h2 */
  --size-2xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);             /* 40-64px  — section display */
  --size-3xl: clamp(3rem, 2.2rem + 4vw, 5.5rem);             /* 48-88px  — hero display */

  /* Weight tokens */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* Tracking */
  --tracking-display: -0.035em;   /* tight for large display */
  --tracking-h2: -0.02em;
  --tracking-h3: -0.01em;
  --tracking-body: 0;
  --tracking-kicker: 0.14em;      /* wide for mono kickers */
  --tracking-mono-label: 0.08em;

  /* Line-heights */
  --leading-display: 0.98;        /* very tight for hero */
  --leading-h2: 1.02;
  --leading-h3: 1.15;
  --leading-body: 1.55;
  --leading-long-form: 1.65;
  --leading-caption: 1.4;

  /* --------------------------------------------------------------------
     Spacing — 8pt-based, near-Fibonacci
     -------------------------------------------------------------------- */
  --space-1: 0.25rem;   /*   4px */
  --space-2: 0.5rem;    /*   8px */
  --space-3: 0.75rem;   /*  12px */
  --space-4: 1rem;      /*  16px */
  --space-5: 1.5rem;    /*  24px */
  --space-6: 2.5rem;    /*  40px */
  --space-7: 4rem;      /*  64px */
  --space-8: 6rem;      /*  96px */
  --space-9: 9rem;      /* 144px */
  --space-10: 13.5rem;  /* 216px */

  /* Section rhythm — fluid */
  --section-pad-y: clamp(4rem, 3rem + 5vw, 9rem);
  --section-pad-x: clamp(1.25rem, 0.5rem + 4vw, 4rem);
  --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);

  /* Reading measure */
  --measure: 64ch;
  --measure-narrow: 42ch;

  /* --------------------------------------------------------------------
     Radius — sharp discipline. No pill reflex.
     -------------------------------------------------------------------- */
  --radius-sharp: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;   /* reserved for rare, deliberate use */

  /* --------------------------------------------------------------------
     Motion — editorial tempo, never linear, never transition-all
     -------------------------------------------------------------------- */
  --motion-snap: 150ms;
  --motion-transition: 450ms;
  --motion-ambient: 800ms;

  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-transition: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ambient: cubic-bezier(0.16, 1, 0.3, 1);   /* ease-out-expo */

  /* --------------------------------------------------------------------
     Shadows — minimal, warm-tinted, never default gray blur
     -------------------------------------------------------------------- */
  --shadow-subtle: 0 1px 2px rgba(26, 23, 20, 0.04), 0 2px 8px rgba(26, 23, 20, 0.05);
  --shadow-lifted: 0 2px 8px rgba(26, 23, 20, 0.06), 0 12px 32px rgba(26, 23, 20, 0.08);

  /* --------------------------------------------------------------------
     Touch targets
     -------------------------------------------------------------------- */
  --tap-min: 44px;

  /* --------------------------------------------------------------------
     Z-index scale
     -------------------------------------------------------------------- */
  --z-sticky: 10;
  --z-nav: 50;
  --z-overlay: 80;
  --z-modal: 100;

  /* --------------------------------------------------------------------
     Container
     -------------------------------------------------------------------- */
  --container-max: 1440px;
  --container-editorial: 1200px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-snap: 0.01ms;
    --motion-transition: 0.01ms;
    --motion-ambient: 0.01ms;
  }
}