/* ============================================================
   Andrew Folkler — Design Tokens (CSS custom properties)
   ------------------------------------------------------------
   Source of truth — adapted from
     Marketing/assets/design-system/project/colors_and_type.css
   Adaptations for production (2026-05-29):
     • Removed Dubai @font-face — using Roboto (loaded via WP enqueue).
     • --font-primary and --font-display now lead with Roboto.
     • All other tokens unchanged from design system spec.
   ============================================================ */

:root {
  /* ---------- Core brand colors (sampled from logo) ---------- */
  --af-indigo:      #0A054D;   /* primary bg / ink */
  --af-navy:        #0A054D;   /* alias — legacy name */
  --af-blue:        #00EEFF;   /* primary accent — electric blue */
  --af-cyan:        #00EEFF;   /* alias — legacy name */
  --af-white:       #FEFFFE;   /* canvas / inverted ink */

  /* ---------- Indigo scale ---------- */
  --indigo-50:      #E6E5F1;
  --indigo-100:     #BFBCDA;
  --indigo-200:     #8A85B7;
  --indigo-300:     #555090;
  --indigo-400:     #2A2471;
  --indigo-500:     #0A054D;
  --indigo-600:     #08043B;
  --indigo-700:     #05032A;
  --indigo-800:     #03021A;
  --indigo-900:     #01000D;

  /* ---------- Blue scale (electric) ---------- */
  --blue-50:        #E6FDFF;
  --blue-100:       #B3F9FF;
  --blue-200:       #80F5FF;
  --blue-300:       #4DF2FF;
  --blue-400:       #1AEFFF;
  --blue-500:       #00EEFF;
  --blue-600:       #00BECC;
  --blue-700:       #008E99;   /* contrast-safe accent on light surfaces */
  --blue-800:       #005F66;
  --blue-900:       #002F33;

  /* ---------- Paper / warm neutrals ---------- */
  --paper:          #FBF8F1;
  --paper-2:        #F3EEE2;
  --paper-edge:     #E5DECB;

  /* ---------- Cool grays (biased toward indigo) ---------- */
  --gray-50:        #F6F6FA;
  --gray-100:       #ECECF3;
  --gray-200:       #D7D7E3;
  --gray-300:       #B5B5C7;
  --gray-400:       #8B8BA3;
  --gray-500:       #606079;
  --gray-600:       #43435A;
  --gray-700:       #2B2B3D;
  --gray-800:       #191926;
  --gray-900:       #0C0C14;

  /* ---------- Semantic foreground / background ---------- */
  --bg:             var(--af-white);
  --bg-alt:         var(--paper);
  --bg-inverse:     var(--af-indigo);

  --fg-1:           var(--af-indigo);   /* primary ink */
  --fg-2:           var(--gray-600);    /* secondary */
  --fg-3:           var(--gray-400);    /* tertiary / captions */
  --fg-muted:       var(--gray-300);
  --fg-on-indigo:   var(--af-white);
  --fg-on-indigo-2: #B8B4D9;            /* secondary on indigo */
  --fg-accent:      var(--blue-700);    /* accessible blue on white/paper */
  --fg-accent-dark: var(--blue-800);

  --border:         var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-inverse: #1E1771;

  /* ---------- Semantic status ---------- */
  --success:        #0E8F6A;
  --warn:           #C98A2B;
  --danger:         #C8412E;

  /* ---------- Type families ---------- */
  /* Primary — Roboto. (Dubai was prior; Roboto chosen 2026-05-29 for ubiquity / cross-platform fidelity.) */
  --font-primary:   "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-sans:      var(--font-primary);

  /* Secondary — Lora. Editorial / long-form / pull quotes. */
  --font-secondary: "Lora", "Charter", "Iowan Old Style", Georgia, serif;
  --font-serif:     var(--font-secondary);

  /* Display — same Roboto stack at large sizes. */
  --font-display:   "Roboto", "Helvetica Neue", sans-serif;
  --font-display-condensed: "Roboto Condensed", "Roboto", sans-serif;

  /* Monospace for metadata / code. */
  --font-mono:      ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ---------- Type scale ---------- */
  --fs-xs:          0.75rem;    /* 12 */
  --fs-sm:          0.875rem;   /* 14 */
  --fs-base:        1rem;       /* 16 */
  --fs-md:          1.125rem;   /* 18 */
  --fs-lg:          1.375rem;   /* 22 */
  --fs-xl:          1.75rem;    /* 28 */
  --fs-2xl:         2.25rem;    /* 36 */
  --fs-3xl:         3rem;       /* 48 */
  --fs-4xl:         4rem;       /* 64 */
  --fs-5xl:         5.5rem;     /* 88 */
  --fs-display:     7.5rem;     /* 120 — logo-style hero */

  /* ---------- Line heights ---------- */
  --lh-tight:       1.02;
  --lh-snug:        1.15;
  --lh-normal:      1.35;
  --lh-body:        1.55;
  --lh-long:        1.7;

  /* ---------- Letter spacing ---------- */
  --tr-tight:       -0.01em;
  --tr-normal:      0;
  --tr-wide:        0.04em;
  --tr-wider:       0.12em;
  --tr-widest:      0.24em;     /* tracked caps — eyebrow / tagline */

  /* ---------- Spacing (4px base) ---------- */
  --sp-0:           0;
  --sp-1:           4px;
  --sp-2:           8px;
  --sp-3:           12px;
  --sp-4:           16px;
  --sp-5:           24px;
  --sp-6:           32px;
  --sp-7:           48px;
  --sp-8:           64px;
  --sp-9:           96px;
  --sp-10:          128px;

  /* ---------- Radii ---------- */
  --r-0:            0;
  --r-sm:           2px;
  --r-md:           4px;
  --r-lg:           8px;
  --r-xl:           14px;
  --r-pill:         999px;

  /* ---------- Shadows — soft, indigo-tinted ---------- */
  --sh-xs:          0 1px 2px  rgba(11, 4, 76, 0.06);
  --sh-sm:          0 2px 6px  rgba(11, 4, 76, 0.08);
  --sh-md:          0 8px 24px rgba(11, 4, 76, 0.10);
  --sh-lg:          0 20px 48px rgba(11, 4, 76, 0.14);
  --sh-glow:        0 0 0 1px rgba(0, 238, 254, 0.35), 0 0 32px rgba(0, 238, 254, 0.25);

  /* ---------- Animation — calm, analytical ---------- */
  --dur-quick:      120ms;
  --dur-base:       200ms;
  --dur-slow:       360ms;
  --ease-standard:  cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-emphasis:  cubic-bezier(0.16, 1, 0.3, 1);
}