/* =============================================================================
   ARC design tokens (colour, type, spacing, radius, elevation, motion).
   Custom properties only - safe to load on any page. Extracted from index.php.
   ============================================================================= */
/* ============================================================
   Wai & ARC — Colour tokens
   Source of truth: ARC Branding v7.0 palette + waitech.com.au
   Two identities share one palette:
     • Wai   — Orange + True Black on white/silver (studio brand)
     • ARC   — Navy + Teal Signal, Orange as accent (product brand)
   ============================================================ */
:root {
  /* --- Brand base palette (from ARC Branding v7.0) --- */
  --wai-orange:      #C75634; /* 03. WAI Orange  — primary accent, shared */
  --arc-navy:        #0A1E3F; /* 01. Navy Blue   — ARC primary */
  --arc-teal:        #74A9AC; /* 02. Teal Signal — ARC secondary */
  --true-black:      #000000; /* Wai primary ink */
  --dark-grey:       #D3D6D9; /* 04. Dark Grey (a light neutral in the guide) */
  --light-silver:    #F4F4F4; /* 05. Light Silver — page tint */
  --white:           #FFFFFF;

  /* --- Orange ramp (tints/shades of WAI Orange) --- */
  --orange-50:  #FBEEE9;
  --orange-100: #F4D3C6;
  --orange-200: #E7A88E;
  --orange-300: #DB7E57;
  --orange-400: #D06740;
  --orange-500: #C75634; /* base */
  --orange-600: #A8462A;
  --orange-700: #863620;
  --orange-800: #612717;

  /* --- Navy ramp --- */
  --navy-50:  #E7EBF1;
  --navy-100: #C2CBDA;
  --navy-200: #8496B4;
  --navy-300: #47618E;
  --navy-400: #223F67;
  --navy-500: #0A1E3F; /* base */
  --navy-600: #081832;
  --navy-700: #061226;
  --navy-800: #030A16;

  /* --- Teal ramp --- */
  --teal-50:  #EEF4F4;
  --teal-100: #D6E5E5;
  --teal-200: #AECDCE;
  --teal-300: #8FBABC;
  --teal-400: #74A9AC; /* base */
  --teal-500: #5C9093;
  --teal-600: #487376;
  --teal-700: #375659;

  /* --- Neutral / grey ramp (cool, tuned to navy) --- */
  --grey-0:   #FFFFFF;
  --grey-50:  #F4F4F4; /* light silver */
  --grey-100: #ECEEF1;
  --grey-150: #E1E5EA;
  --grey-200: #D3D6D9; /* dark grey token */
  --grey-300: #B7BdC5;
  --grey-400: #929AA6;
  --grey-500: #6C7480;
  --grey-600: #4C525C;
  --grey-700: #343941;
  --grey-800: #20242A;
  --grey-900: #12151A;

  /* --- Semantic / status --- */
  --success-500: #3F8F6E;
  --success-100: #DDEEE6;
  --warning-500: #C79A34;
  --warning-100: #F6ECCF;
  --danger-500:  #C4432E;
  --danger-100:  #F4D8D2;
  --info-500:    #3E6E9E;
  --info-100:    #DBE7F1;

  /* ============================================================
     SEMANTIC ALIASES — default (light) theme, ARC-leaning
     Consumers should reference these, not the raw ramps.
     ============================================================ */
  --brand-primary:        var(--arc-navy);
  --brand-secondary:      var(--arc-teal);
  --brand-accent:         var(--wai-orange);

  /* Surfaces */
  --surface-page:         var(--grey-50);
  --surface-card:         var(--white);
  --surface-raised:       var(--white);
  --surface-sunken:       var(--grey-100);
  --surface-inverse:      var(--arc-navy);
  --surface-accent-soft:  var(--orange-50);
  --surface-brand-soft:   var(--navy-50);

  /* Text */
  --text-primary:         var(--navy-500);
  --text-secondary:       var(--grey-600);
  --text-tertiary:        var(--grey-500);
  --text-on-brand:        var(--white);
  --text-on-accent:       var(--white);
  --text-link:            var(--wai-orange);
  --text-link-hover:      var(--orange-700);

  /* Borders / lines */
  --border-subtle:        var(--grey-150);
  --border-default:       var(--grey-200);
  --border-strong:        var(--grey-300);
  --border-brand:         var(--arc-navy);
  --border-focus:         var(--arc-teal);

  /* Interactive — accent (Wai orange) */
  --action-bg:            var(--wai-orange);
  --action-bg-hover:      var(--orange-600);
  --action-bg-active:     var(--orange-700);
  --action-fg:            var(--white);

  /* Interactive — brand (navy) */
  --action-brand-bg:        var(--arc-navy);
  --action-brand-bg-hover:  var(--navy-400);
  --action-brand-bg-active: var(--navy-600);

  /* Focus ring */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--arc-teal) 55%, transparent);
}

/* ============================================================
   Wai brand scope — orange-on-black studio identity.
   Apply .theme-wai on any subtree to retint to the studio brand.
   ============================================================ */
.theme-wai {
  --brand-primary:   var(--true-black);
  --brand-secondary: var(--wai-orange);
  --brand-accent:    var(--wai-orange);
  --text-primary:    var(--true-black);
  --text-link:       var(--wai-orange);
  --border-brand:    var(--true-black);
  --action-brand-bg:        var(--true-black);
  --action-brand-bg-hover:  var(--grey-800);
  --action-brand-bg-active: var(--grey-900);
}

/* ============================================================
   Dark surface scope — navy canvas (ARC hero / Wai footer).
   Apply .theme-dark on dark sections.
   ============================================================ */
.theme-dark {
  --surface-page:    var(--navy-500);
  --surface-card:    var(--navy-400);
  --surface-raised:  var(--navy-400);
  --surface-sunken:  var(--navy-600);
  --text-primary:    var(--grey-50);
  --text-secondary:  var(--navy-100);
  --text-tertiary:   var(--navy-200);
  --border-subtle:   color-mix(in srgb, var(--white) 8%, transparent);
  --border-default:  color-mix(in srgb, var(--white) 14%, transparent);
  --border-strong:   color-mix(in srgb, var(--white) 24%, transparent);
}
/* ============================================================
   Wai & ARC — Typography tokens
   Display / headings : Montserrat  (real brand font)
   Body / UI          : Figtree     (Proxima Nova substitute)
   Data / code        : IBM Plex Mono
   ============================================================ */
:root {
  /* Families */
  /* Display/headings = Proxima Nova (real brand font, weights 600–900).
     Body/UI = Figtree — Proxima's upright Regular/Medium weren't supplied. */
  --font-display: 'Proxima Nova', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Figtree', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Weights */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-black:    800; /* @kind font */

  /* Fluid display + heading scale (1.250 major-third base) */
  --text-display-2xl: 4.5rem;   /* 72px — hero */
  --text-display-xl:  3.5rem;   /* 56px */
  --text-display-lg:  2.75rem;  /* 44px */
  --text-h1:          2.25rem;  /* 36px */
  --text-h2:          1.75rem;  /* 28px */
  --text-h3:          1.375rem; /* 22px */
  --text-h4:          1.125rem; /* 18px */
  --text-body-lg:     1.125rem; /* 18px */
  --text-body:        1rem;     /* 16px */
  --text-body-sm:     0.875rem; /* 14px */
  --text-caption:     0.75rem;  /* 12px */
  --text-overline:    0.6875rem;/* 11px */

  /* Line heights */
  --lh-tight:   1.05; /* @kind other */
  --lh-snug:    1.2; /* @kind other */
  --lh-heading: 1.25; /* @kind other */
  --lh-normal:  1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* Letter spacing */
  --ls-tighter: -0.03em; /* @kind other */
  --ls-tight:   -0.015em; /* @kind other */
  --ls-normal:  0; /* @kind other */
  --ls-wide:    0.04em; /* @kind other */
  --ls-overline:0.14em; /* @kind other */

  /* Semantic aliases */
  --heading-font:   var(--font-display);
  --heading-weight: var(--fw-bold);
  --body-font:      var(--font-sans);
}
/* ============================================================
   Wai & ARC — Spacing scale (4px base grid)
   ============================================================ */
:root {
  --space-0:   0;
  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */
  --space-32:  8rem;     /* 128px */

  /* Layout */
  --container-max:  1200px;
  --container-wide: 1360px;
  --gutter:         var(--space-6);
  --section-y:      var(--space-24);
}
/* ============================================================
   Wai & ARC — Radius & elevation
   ARC UI leans on soft, calm rounding; the brand marks are angular.
   ============================================================ */
:root {
  /* Corner radii */
  --radius-none: 0;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* Elevation — cool, low-spread shadows tuned to navy ink */
  --shadow-xs:  0 1px 2px rgba(10, 30, 63, 0.06);
  --shadow-sm:  0 1px 3px rgba(10, 30, 63, 0.08), 0 1px 2px rgba(10, 30, 63, 0.05);
  --shadow-md:  0 4px 12px rgba(10, 30, 63, 0.08), 0 2px 4px rgba(10, 30, 63, 0.05);
  --shadow-lg:  0 12px 28px rgba(10, 30, 63, 0.12), 0 4px 8px rgba(10, 30, 63, 0.06);
  --shadow-xl:  0 24px 56px rgba(10, 30, 63, 0.16), 0 8px 16px rgba(10, 30, 63, 0.08);
  --shadow-focus: var(--focus-ring);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
}