/* ============================================================================
   ALDesign Group — Design Tokens (single source of truth)
   Consumed by the group portal and all four sub-brand sites.
   Edit values HERE only; never hard-code a color, size, or duration in a page.
   ----------------------------------------------------------------------------
   RECONCILED (Jun 21 2026, per A): UI tokens now match the LOGO artwork hues.
   Studio = #21689A, Structures = #98C93C are the single brand truth across both
   logo and UI. These anchor hues drive fills, gradient washes, borders and large
   display type (all clear the 3:1 non-text contrast threshold on #0D0D0D).
   For SMALL-TEXT use of an accent on dark, bind to --accent-ink (readable tint),
   NOT --accent — the anchor blues are sub-4.5:1 as small text by design.
   ========================================================================== */

:root {
  /* --- Brand accents (per sub-brand) ----------------------------------- */
  --c-studio:        #21689A;   /* ALDesign Studio  — matches logo artwork     */
  --c-structures:    #98C93C;   /* ALDesign Structures — matches logo artwork  */
  --c-tao:           #F5C500;   /* TAO — Signage & Wayfinding (logo == token)  */
  --c-woomet:        #B07D4E;   /* WOOMET — Outdoor Furniture (monochrome logo) */

  /* readable tints for text-on-dark use of each accent (bind via --accent-ink) */
  --c-studio-200:    #7FB3F0;
  --c-structures-200:#A6E06A;
  --c-tao-200:       #FFDE5C;
  --c-woomet-200:    #D6A878;

  /* --- Neutral ramp (dark-first) -------------------------------------- */
  --n-0:   #0D0D0D;   /* portal canvas        */
  --n-50:  #141414;   /* raised surface       */
  --n-100: #1C1C1C;   /* card surface         */
  --n-200: #2A2A2A;   /* border / hairline    */
  --n-300: #3D3D3D;
  --n-500: #838383;   /* tertiary text — 4.8:1 on bg (AA)   */
  --n-600: #ABABAB;   /* secondary text — 8.4:1 on bg (AA)  */
  --n-800: #C9C9C5;
  --n-900: #E8E8E2;   /* primary text (off-white, matches logo text) */
  --n-1000:#FFFFFF;

  /* --- Semantic (theme = dark) --------------------------------------- */
  --bg:            var(--n-0);
  --bg-raised:     var(--n-50);
  --surface:       var(--n-100);
  --border:        var(--n-200);
  --text:          var(--n-900);
  --text-muted:    var(--n-600);
  --text-faint:    var(--n-500);
  --accent:        var(--c-studio);     /* anchor hue: fills/borders/large display */
  --accent-ink:    var(--c-studio-200); /* readable tint: accent-colored SMALL text on dark */
  --on-accent:     #fff;                /* text ON an accent fill (white on studio blue) */
  --focus-ring:    #7FB3F0;

  /* --- Typography ----------------------------------------------------- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:    "Outfit", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* fluid modular scale (clamp: min, preferred vw, max) — ratio ~1.25 */
  --step--1: clamp(0.83rem, 0.78rem + 0.20vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.94rem + 0.28vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.13rem + 0.50vw, 1.50rem);
  --step-2:  clamp(1.56rem, 1.35rem + 0.90vw, 2.13rem);
  --step-3:  clamp(1.95rem, 1.60rem + 1.55vw, 3.00rem);
  --step-4:  clamp(2.44rem, 1.85rem + 2.60vw, 4.24rem);
  --step-5:  clamp(3.05rem, 2.05rem + 4.40vw, 6.00rem);
  --step-6:  clamp(3.80rem, 2.10rem + 7.40vw, 8.50rem);  /* hero display */

  --leading-tight: 1.04;
  --leading-snug:  1.18;
  --leading-body:  1.6;
  --tracking-tight:-0.02em;
  --tracking-wide:  0.18em;   /* kickers / labels */

  --weight-light: 300;
  --weight-reg:   400;
  --weight-med:   500;
  --weight-semi:  600;
  --weight-bold:  700;

  /* --- Spacing (8px base) -------------------------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-6: 1.5rem;   --space-8: 2rem;
  --space-12: 3rem;    --space-16: 4rem;    --space-20: 5rem;
  --space-24: 6rem;    --space-32: 8rem;    --space-40: 10rem;
  --section-y: clamp(4rem, 8vw, 10rem);     /* vertical rhythm between sections */

  /* --- Layout -------------------------------------------------------- */
  --container:    1280px;
  --container-wide:1520px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* --- Radius / borders / shadow ------------------------------------ */
  --radius-sm: 6px; --radius: 12px; --radius-lg: 22px; --radius-pill: 999px;
  --hairline: 1px solid var(--border);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 18px 50px -12px rgba(0,0,0,.7);

  /* --- Motion -------------------------------------------------------- */
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --ease-inout: cubic-bezier(.65,.05,.36,1);
  --ease-emph:  cubic-bezier(.16,1,.3,1);   /* premium "settle" */
  --dur-1: .18s; --dur-2: .35s; --dur-3: .6s; --dur-4: .9s;
  --curtain: 1.05s;    /* page-transition curtain duration */

  --z-base:0; --z-raised:10; --z-nav:100; --z-overlay:1000; --z-curtain:2000;
}

/* Per-brand theming hook: add class to <body> to retheme the accent.
   e.g. <body class="theme-structures"> on the Structures site. */
.theme-studio     { --accent: var(--c-studio);     --accent-ink: var(--c-studio-200);     --focus-ring: var(--c-studio-200);     --on-accent:#fff; }
.theme-structures { --accent: var(--c-structures); --accent-ink: var(--c-structures-200); --focus-ring: var(--c-structures-200); --on-accent:#0D0D0D; }
.theme-tao        { --accent: var(--c-tao);        --accent-ink: var(--c-tao-200);        --focus-ring: var(--c-tao-200);        --on-accent:#0D0D0D; }
.theme-woomet     { --accent: var(--c-woomet);     --accent-ink: var(--c-woomet-200);     --focus-ring: var(--c-woomet-200);     --on-accent:#0D0D0D; }