/* ==========================================================================
   EGW Theme Tokens — Phase A (token layer per EGW_Theme_System_Spec §2).
   Tier 1 (primitives) -> Tier 2 (semantic, the only thing components use).
   Uses light-dark(); requires `color-scheme: light dark` (set in global.css).
   Loaded BEFORE all component CSS so the cascade is predictable (§10).
   Components migrate to these tokens in Phase B.
   ========================================================================== */

:root {
  /* ---- Tier 1: primitives (raw — never used directly by components) ---- */
  --egw-white: #FFFFFF;
  --egw-near-white: #FAFAF9;
  --egw-gray-50: #F1F1EF;
  --egw-gray-100: #E5E5E2;
  --egw-gray-300: #C3C2B7;
  --egw-gray-500: #8A8778;
  --egw-gray-700: #5C5C58;
  --egw-gray-900: #1A1A1A;
  --egw-ink: #26251F;  /* v3.2.11: aligned to inverted-ladder on-accent */
  --egw-charcoal-bg: #403F3A;  /* v3.1.71 INVERTED ladder: sections lighter than their contents */
  --egw-charcoal-2: #282723;   /* v3.1.74 card — one step darker again per owner */
  --egw-charcoal-3: #33322E;   /* elevated strips — between page and card */
  --egw-offwhite: #F2F2EF;
  --egw-text-dark: #F8F8F6;
  /* status primitives (AA-verified against their surfaces below) */
  --egw-green: #157038;  --egw-green-l: #81C995;  /* v3.1.67 desaturated (M2) */
  --egw-amber: #B45309;  --egw-amber-l: #FBCB65;
  --egw-red:   #B42318;  --egw-red-l:   #F28B82;
  --egw-blue:  #1D4ED8;  --egw-blue-l:  #8AB4F8;

  /* ---- Tier 2: semantic tokens (§2.2). Both modes via light-dark(). ----
     Existing --color-bg / --color-text / --color-text-muted / --color-border /
     --color-focus stay defined in global.css; the tokens below complete the set. */
  --color-surface-1:      light-dark(#EDEDEB, #383733);  /* v3.2.10 C1 Bright stone (owner pick) */
  --color-surface-2:      light-dark(#F2F2F1, var(--egw-charcoal-2));  /* v3.1.75 light: cards darker than the page */
  --color-surface-3:      light-dark(#F8F8F7, var(--egw-charcoal-3));
  --color-text-on-accent: light-dark(#FFFFFF, #26251F);
  --color-border-strong:  light-dark(rgba(17,17,17,.22), rgba(248,248,246,.22));
  --color-accent:         light-dark(var(--egw-gray-900), var(--egw-offwhite));
  --color-accent-hover:   light-dark(#000000, #FFFFFF);
  --color-link:           light-dark(#1A1A1A, #E8EAED);
  --color-success: light-dark(var(--egw-green), var(--egw-green-l));
  --color-warning: light-dark(var(--egw-amber), var(--egw-amber-l));
  --color-error:   light-dark(var(--egw-red),   var(--egw-red-l));
  --color-info:    light-dark(var(--egw-blue),  var(--egw-blue-l));
  --color-success-bg: light-dark(#E7F6EC, #243428);
  --color-warning-bg: light-dark(#FEF3E2, #332C1C);
  --color-error-bg:   light-dark(#FDECEA, #3A2725);
  --color-info-bg:    light-dark(#E7EEFE, #252C3A);
  --color-overlay: light-dark(rgba(17,17,17,.45), rgba(0,0,0,.60));
  /* v3.2.11: light-dark() is colors-only — these were invalid and rendered NO shadow. Split per mode. */
  --shadow-1: 0 1px 3px rgba(0,0,0,.10);
  --shadow-2: 0 4px 12px rgba(0,0,0,.12);
  --shadow-3: 0 12px 32px rgba(0,0,0,.16);

  /* ---- Tier 3: component tokens (map to Tier 2) ---- */
  --header-bg:     light-dark(rgba(255,255,255,.9), rgba(69,68,63,.9));  /* v3.1.69: on the dark ladder (was stale #171717) */
  --header-border: light-dark(rgba(0,0,0,.08), rgba(255,255,255,.09));
  --footer-bg:     light-dark(#F8F8F7, #454440);
  --footer-border: light-dark(rgba(0,0,0,.08), rgba(255,255,255,.09));
  --btn-primary-bg:    var(--color-accent);
  --btn-primary-text:  var(--color-text-on-accent);
  --btn-primary-hover: var(--color-accent-hover);
  --input-bg:     light-dark(#EBEBE9, #232220);  /* fields — DEEPEST layer in BOTH modes */
  --input-border: var(--color-border-strong);
  --card-bg:      var(--color-surface-2);
  --card-border:  var(--color-border);
  --card-shadow:  var(--shadow-2);

  /* ---- v3.1.66: neutral TINT scale (mode-correct alpha ink) ----
     Replaces literal rgba(127,127,127,.x) greys: black-alpha in light,
     white-alpha in dark, so tints read identically in both modes. */
  --tint-1: light-dark(rgba(17,17,17,.045), rgba(255,255,255,.045));
  --tint-2: light-dark(rgba(17,17,17,.08),  rgba(255,255,255,.07));
  --tint-3: light-dark(rgba(17,17,17,.13),  rgba(255,255,255,.11));
  --tint-4: light-dark(rgba(17,17,17,.20),  rgba(255,255,255,.17));
  --tint-5: light-dark(rgba(17,17,17,.32),  rgba(255,255,255,.28));
  /* focus ring + elevation shadows, tuned per mode */
  --focus-ring-c: light-dark(rgba(17,17,17,.16), rgba(255,255,255,.24));
  --inset-bg: light-dark(#EBEBE9, #232220); /* wells INSIDE cards — always darker than their card */
  --stage-bg: light-dark(#F8F8F7, #33322E);     /* the stage housing the auth card */
  --stage-shadow: 0 22px 48px -30px rgba(17,17,17,.16);
  --handle-shadow: 0 2px 6px rgba(17,17,17,.25), inset 0 1px 0 rgba(255,255,255,.9);  /* v3.1.75: raised-handle depth — a BASIC PRINCIPLE in both modes */
  --shadow-card:  0 22px 48px -30px rgba(17,17,17,.20);
  --shadow-float: 0 10px 26px -14px rgba(17,17,17,.24);
  --shadow-press: 0 2px 8px rgba(17,17,17,.20);

  /* ---- v3.1.67: DEPTH tokens (flat in light, 3D in dark) ---- */
  --edge-light:  inset 0 1px 0 rgba(255,255,255,.75);
  --well-shadow: inset 0 1.5px 3px rgba(17,17,17,.08);
  --card-grad:   var(--card-bg);  /* flat faces in both modes */
  --btn-primary-grad: var(--btn-primary-bg);
}
:root { --page-glow-1: light-dark(transparent, rgba(255,255,255,.028)); --page-glow-2: light-dark(transparent, rgba(255,255,255,.015)); }

/* On the member profile, bind the semantic tokens to the ACTIVE palette
   (egw-appearance.js sets --prof-* inline on .prof-container). Fallbacks keep
   them valid before/without a palette. */
.prof-container,
.egw-modal-backdrop {   /* v2.98.2: member dialogs live on <body>; give them the neutral member accent so confirm buttons aren't the public-site navy */
  --color-surface-1:      var(--prof-light-section, light-dark(#F8F8F7, #383733));
  --color-surface-2:      var(--prof-light-card,    light-dark(#F2F2F1, #282723));
  --color-surface-3:      var(--prof-light-section, light-dark(#F8F8F7, #33322E));
  --color-accent:         var(--prof-primary,       light-dark(#1A1A1A, #F2F2EF));
  --color-accent-hover:   var(--prof-primary-hover, light-dark(#000000, #FFFFFF));
  --color-text-on-accent: var(--prof-on-primary,    #FFFFFF);
  --color-border-strong:  var(--prof-border-light,  rgba(127,127,127,.30));
}

/* ==========================================================================
   EGW Spatial Tokens — Layout System Phase 2 (per EGW_Layout_System_Spec §2).
   8-point scale (4px sub-grid) + fluid section spacing + locked radius + icon
   sizes. Single source of truth for spacing/sizing/radius across member + auth
   + public pages. Existing t-shirt names (global.css --space-xs..6xl,
   --border-radius-*) are kept as legacy aliases; new/remediated work uses these.
   ========================================================================== */
:root {
  /* Spacing (8-pt, 4px sub-grid) — allowed: 4 8 12 16 24 32 40 48 64 80 */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 base */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  /* Fluid spacing (preferred for section/hero rhythm) */
  --space-section: clamp(2rem, 4vw + 1rem, 4rem);
  --space-gap-fluid: clamp(1rem, 3vw, 2.5rem);
  /* Radius (locked) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;
  /* Icon sizes (locked) — 16 20 24 32 48 */
  --icon-xs: 16px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 48px;
  /* Readable measure for body text (§10) */
  --measure: 65ch;
}

/* ==========================================================================
   EGW Motion Tokens — Motion System Phase 2 (per EGW_Motion_Hover_Animation_Spec §2).
   Durations + meaningful easings + entrance distance. Single source of truth
   for all motion. Legacy --transition-* (global.css) kept as aliases; new and
   remediated work uses these. Reduced-motion handled globally (frontend-responsive).
   ========================================================================== */
:root {
  --motion-instant: 80ms;
  --motion-fast:    150ms;
  --motion-base:    220ms;
  --motion-slow:    320ms;
  --motion-slower:  480ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --motion-rise: 8px;
}


/* ═════════ v3.1.75: dark-mode values for NON-COLOR depth tokens.
   light-dark() is colors-only per spec — shadows/gradients stored there were
   silently invalid, which is why depth never fully rendered. ═════════ */
[data-theme="dark"] {
  --shadow-1: 0 1px 3px rgba(0,0,0,.50);
  --shadow-2: 0 6px 18px rgba(0,0,0,.55);
  --shadow-3: 0 18px 48px rgba(0,0,0,.60);
  --shadow-card:  0 18px 40px -20px rgba(0,0,0,.5);
  --shadow-float: 0 10px 22px -12px rgba(0,0,0,.45);
  --shadow-press: 0 1px 6px rgba(0,0,0,.3);
  --edge-light:  inset 0 1px 0 rgba(255,255,255,.05);
  --well-shadow: inset 0 1.5px 3px rgba(0,0,0,.35);
  --stage-shadow: 0 24px 50px -28px rgba(0,0,0,.45);
  --handle-shadow: 0 3px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-1: 0 1px 3px rgba(0,0,0,.50);
    --shadow-2: 0 6px 18px rgba(0,0,0,.55);
    --shadow-3: 0 18px 48px rgba(0,0,0,.60);
    --shadow-card:  0 18px 40px -20px rgba(0,0,0,.5);
    --shadow-float: 0 10px 22px -12px rgba(0,0,0,.45);
    --shadow-press: 0 1px 6px rgba(0,0,0,.3);
    --edge-light:  inset 0 1px 0 rgba(255,255,255,.05);
    --well-shadow: inset 0 1.5px 3px rgba(0,0,0,.35);
    --stage-shadow: 0 24px 50px -28px rgba(0,0,0,.45);
    --handle-shadow: 0 3px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.5);
  }
}