/* ============================================================
   OA Design System — tokens
   Source: _ds/order-of-the-arrow-design-system/tokens/{colors,typography,spacing}.css
   (OA Brand Guidelines, Jan 2025). Font families are set inline by
   inc/enqueue.php so an Adobe Fonts Museo kit takes precedence.
   ============================================================ */

:root {
  /* ---- Brand primaries ---- */
  --oa-red:        #E31837;
  --oa-slate:      #36454F;
  --oa-white:      #FFFFFF;

  /* ---- Brand secondaries ---- */
  --oa-maroon:     #640813;
  --oa-mist:       #E6E7E8;
  --oa-ink:        #030006;
  --oa-blue:       #005596;

  /* ---- Red ramp ---- */
  --oa-red-50:     #FDECEF;
  --oa-red-100:    #F9C9D1;
  --oa-red-200:    #F2909F;
  --oa-red-300:    #EC5870;
  --oa-red-400:    #E83253;
  --oa-red-500:    #E31837;
  --oa-red-600:    #BE122D;
  --oa-red-700:    #8F0E22;
  --oa-red-800:    #640813;
  --oa-red-900:    #44060D;

  /* ---- Slate ramp ---- */
  --oa-slate-50:   #F4F5F6;
  --oa-slate-100:  #E6E7E8;
  --oa-slate-200:  #CDD1D4;
  --oa-slate-300:  #A7AEB3;
  --oa-slate-400:  #768089;
  --oa-slate-500:  #586671;
  --oa-slate-600:  #36454F;
  --oa-slate-700:  #2A363E;
  --oa-slate-800:  #1B242A;
  --oa-slate-900:  #0E1418;

  /* ---- Blue ramp ---- */
  --oa-blue-100:   #CCE0EE;
  --oa-blue-300:   #66A0C8;
  --oa-blue-500:   #005596;
  --oa-blue-700:   #003F70;

  /* ---- Semantic: surfaces & text ---- */
  --color-bg:             var(--oa-white);
  --color-surface:        var(--oa-white);
  --color-surface-sunken: var(--oa-slate-50);
  --color-surface-mist:   var(--oa-mist);
  --color-surface-dark:   var(--oa-slate-600);
  --color-surface-ink:    var(--oa-ink);

  --text-primary:   var(--oa-slate-700);
  --text-secondary: var(--oa-slate-500);
  --text-muted:     var(--oa-slate-400);
  --text-inverse:   var(--oa-white);
  --text-brand:     var(--oa-red);

  /* ---- Semantic: brand roles ---- */
  --brand-primary:       var(--oa-red);
  --brand-primary-hover: var(--oa-red-600);
  --brand-primary-press: var(--oa-red-700);
  --brand-dark:          var(--oa-slate-600);
  --brand-accent:        var(--oa-blue);
  --brand-accent-hover:  var(--oa-blue-700);

  /* ---- Lines & focus ---- */
  --color-border:        var(--oa-slate-200);
  --color-border-strong: var(--oa-slate-300);
  --color-divider:       var(--oa-mist);
  --focus-ring:          var(--oa-blue-500);

  /* ---- Status ---- */
  --color-link:    var(--oa-blue-500);
  --color-danger:  var(--oa-red-600);
  --color-success: #1F7A4D;
  --color-warning: #C7901C;

  /* ---- Families (overridden inline) ---- */
  --font-slab: 'Zilla Slab', 'Museo Slab', Rockwell, Georgia, serif;
  --font-sans: 'Nunito Sans', 'Museo Sans', 'Gill Sans', 'Segoe UI', system-ui, sans-serif;
  --font-display: var(--font-slab);
  --font-body: var(--font-sans);

  /* ---- Weights ---- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* ---- Tracking ---- */
  --tracking-tight:   0em;
  --tracking-body:    0.012em;
  --tracking-head:    0.02em;
  --tracking-eyebrow: 0.16em;

  /* ---- Type scale ---- */
  --text-2xs:  0.75rem;
  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  4rem;
  --text-5xl:  5.25rem;

  /* ---- Line heights ---- */
  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Spacing (4px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-12: 6rem;

  --logo-clear-space: var(--space-5);

  /* ---- Radii ---- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-thin:  1px;
  --border-base:  1.5px;
  --border-thick: 3px;
  --border-rule:  4px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(14, 20, 24, 0.06);
  --shadow-sm: 0 1px 3px rgba(14, 20, 24, 0.08), 0 1px 2px rgba(14, 20, 24, 0.06);
  --shadow-md: 0 4px 12px rgba(14, 20, 24, 0.10), 0 2px 4px rgba(14, 20, 24, 0.06);
  --shadow-lg: 0 12px 28px rgba(14, 20, 24, 0.14), 0 4px 8px rgba(14, 20, 24, 0.08);
  --shadow-focus: 0 0 0 3px rgba(0, 85, 150, 0.35);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---- Layout ---- */
  --container-sm: 640px;
  --container-md: 860px;
  --container-lg: 1120px;
  --container-xl: 1320px;

  /* Sticky header height; kept current by oa.js */
  --oa-header-h: 76px;
}