/* ─────────────────────────────────────────────────────────────
   ARL ELEVATE - Design Tokens
   Editorial register: warm cream + deep aubergine + antique gold.
   See docs/DESIGN.md for the full system.
   ───────────────────────────────────────────────────────────── */

:root {

  /* ─── PALETTE ──────────────────────────────────────────────── */

  /* Foundations - warm cream over white */
  --cream:        #F6EFE0;     /* primary background */
  --cream-warm:   #FAF4E6;     /* card / panel surfaces */
  --cream-deep:   #ECE2CB;     /* secondary surfaces, hover states */
  --cream-lift:   #FDF9EF;     /* lifted surfaces (form fields, etc.) */

  /* Ink - deep but warm, never pure black */
  --ink:          #151110;     /* primary body text */
  --espresso:     #2A1E17;     /* secondary body text */
  --charcoal:     #3D2F27;     /* tertiary text */
  --stone:        #5E544B;     /* captions, meta, labels */
  --stone-soft:   #8A7D72;     /* lightest readable secondary */

  /* Brand accents - saturated, controlled */
  --aubergine:        #5C2A5C;     /* primary accent - matches CTA band */
  --aubergine-deep:   #230F28;     /* deepest variant - backgrounds, inverted */
  --aubergine-mid:    #5C2A5C;     /* mid-tone - lighter inverted backgrounds */
  --violet:           #6B1F8C;     /* logo accent purple - matches the V chevron in the ARL Elevate lockup */
  --gold:             #9B7A3F;     /* primary gold - antique, warm */
  --gold-bright:      #C9A961;     /* brighter gold - emphasis on dark */
  --gold-soft:        #E0C68A;     /* soft gold - hover, secondary emphasis */

  /* Functional */
  --rule:         rgba(21, 17, 16, 0.22);    /* primary borders / rules */
  --rule-soft:    rgba(21, 17, 16, 0.10);    /* secondary borders / dotted dividers */

  /* ─── TYPOGRAPHY ───────────────────────────────────────────── */

  --serif-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --serif-body:    'Source Serif 4', 'Source Serif Pro', 'Charter', Georgia, serif;

  /* Fluid type scale (mobile → large desktop) */
  --type-xs:    clamp(11px, 0.7vw + 9px,  13px);
  --type-sm:    clamp(13px, 0.7vw + 11px, 15px);
  --type-base:  clamp(16px, 0.5vw + 14px, 18px);
  --type-lg:    clamp(18px, 0.7vw + 16px, 22px);
  --type-xl:    clamp(22px, 1.2vw + 18px, 28px);
  --type-2xl:   clamp(28px, 1.8vw + 22px, 40px);
  --type-3xl:   clamp(36px, 3vw + 24px, 60px);
  --type-4xl:   clamp(48px, 5vw + 28px, 88px);
  --type-5xl:   clamp(56px, 7vw + 32px, 128px);

  /* ─── SPACING ──────────────────────────────────────────────── */

  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    24px;
  --space-6:    32px;
  --space-7:    48px;
  --space-8:    64px;
  --space-9:    96px;
  --space-10:   128px;

  /* ─── LAYOUT ───────────────────────────────────────────────── */

  --container-narrow: 720px;     /* for body copy + text-led pages */
  --container-base:   1080px;    /* for most pages */
  --container-wide:   1280px;    /* for case grids, etc. */

  --gutter-mobile:    20px;
  --gutter-desktop:   48px;

  /* ─── MOTION ───────────────────────────────────────────────── */

  --ease-out:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.76, 0, 0.24, 1);
  --ease-snap:     cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:    150ms;
  --duration-base:    300ms;
  --duration-slow:    600ms;

  /* ─── ELEVATION ────────────────────────────────────────────── */

  --shadow-sm: 0 2px 8px -4px rgba(21, 17, 16, 0.12);
  --shadow-md: 0 8px 24px -12px rgba(21, 17, 16, 0.18);
  --shadow-lg: 0 16px 40px -16px rgba(61, 26, 61, 0.24);

  /* ─── RADII (use sparingly; this is an editorial site, not SaaS) ─── */

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

}