@layer interface, legacy;
:root {
  color-scheme: dark;

  /* Darkness Mature 4.0 — core palette */
  --bg-950: #07090d;
  --bg-925: #090c11;
  --bg-900: #0b0f14;
  --bg-850: #0e141b;
  --bg-800: #121a23;

  --surface-0: #0a0e13;
  --surface-1: #0d131a;
  --surface-2: #111923;
  --surface-3: #16212c;
  --surface-raised: #18242f;
  --surface-hover: rgba(148, 163, 184, .065);
  --surface-pressed: rgba(148, 163, 184, .10);

  --line: rgba(166, 183, 199, .115);
  --line-soft: rgba(166, 183, 199, .075);
  --line-strong: rgba(166, 183, 199, .22);

  --text-100: #f3f6f8;
  --text-200: #dce3e8;
  --text-300: #b7c2cb;
  --text-400: #909da9;
  --text-500: #6f7c88;

  /* Brand and semantic color system. Emerald remains the Darkness signature,
     but contextual accents are available for product areas. */
  --brand-300: #9ac8ad;
  --brand-400: #80b497;
  --brand-500: #577e68;
  --brand-600: #42644f;
  --brand-soft: rgba(100, 187, 133, .105);
  --brand-faint: rgba(100, 187, 133, .055);

  --info: #69b7dc;
  --info-soft: rgba(105, 183, 220, .11);
  --security: #6c9fe5;
  --security-soft: rgba(108, 159, 229, .11);
  --economy: #d5aa62;
  --economy-soft: rgba(213, 170, 98, .11);
  --community: #aa91e8;
  --community-soft: rgba(170, 145, 232, .11);
  --creative: #8b91ed;
  --creative-soft: rgba(139, 145, 237, .11);
  --success: #64bb85;
  --warning: #d5a454;
  --danger: #e27376;
  --success-soft: rgba(100, 187, 133, .11);
  --warning-soft: rgba(213, 164, 84, .11);
  --danger-soft: rgba(226, 115, 118, .11);

  /* Functional actions stay consistent even when a product area changes its
     thematic accent. Section color = context; action color = behavior. */
  --action-primary: #64bb85;
  --action-primary-hover: #77c995;
  --action-primary-pressed: #54aa76;
  --action-primary-text: #06110b;
  --action-primary-soft: rgba(100, 187, 133, .12);

  /* Backwards-compatible aliases used by existing modules. */
  --green-300: var(--brand-300);
  --green-400: var(--brand-400);
  --green-500: var(--brand-500);
  --green-600: var(--brand-600);
  --green-glow: var(--brand-soft);
  --cyan: var(--info);

  --accent: var(--brand-400);
  --accent-strong: var(--brand-500);
  --accent-soft: var(--brand-soft);
  --accent-faint: var(--brand-faint);

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);

  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-md: 14px;
  --text-lg: 15.5px;
  --text-xl: 18px;
  --title-sm: 20px;
  --title-md: 26px;
  --title-lg: 34px;
  --display: clamp(44px, 6vw, 72px);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 52px;
  --space-10: 64px;

  /* Shape */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Depth: quieter and more physical than neon glow. */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.22);
  --shadow-soft: 0 10px 28px rgba(0,0,0,.20);
  --shadow: 0 18px 44px rgba(0,0,0,.27);
  --shadow-raised: 0 24px 64px rgba(0,0,0,.34);

  --container: 1200px;
  --container-wide: 1360px;

  /* Motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --motion-fast: 150ms;
  --motion-normal: 220ms;
  --motion-slow: 300ms;

  --focus-ring: 0 0 0 2px var(--bg-950), 0 0 0 4px color-mix(in srgb, var(--accent) 72%, white 0%);
}


:root{
 --bg-950:#171e24;--bg-925:#192229;--bg-900:#1c252d;--bg-850:#202b33;--bg-800:#28353e;
 --surface-0:#182128;--surface-1:#212c34;--surface-2:#26323b;--surface-3:#2b3943;--surface-raised:#2b3943;
 --surface-hover:#ffffff08;--surface-pressed:#ffffff10;
 --line:#36434d;--line-soft:#2d3942;--line-strong:#536471;
 --text-100:#f2f5f6;--text-200:#e0e7eb;--text-300:#c4cfd6;--text-400:#afbdc7;--text-500:#a0b0bc;
 --brand-300:#b7eed6;--brand-400:#a0e2c4;--brand-500:#a0e2c4;--brand-600:#b7eed6;--brand-soft:#a0e2c414;--brand-faint:#a0e2c408;
 --action-primary:#a0e2c4;--action-primary-hover:#b7eed6;--action-primary-pressed:#8bd2b2;--action-primary-text:#13271f;--action-primary-soft:#a0e2c414;
 --accent:#a0e2c4;--accent-strong:#a0e2c4;--accent-soft:#a0e2c414;--accent-faint:#a0e2c408;
 --info:#b4cbd8;--info-soft:#b4cbd810;--security:#c4cfd6;--security-soft:#c4cfd610;--economy:#c4cfd6;--economy-soft:#c4cfd610;
 --community:#c4cfd6;--community-soft:#c4cfd610;--creative:#c4cfd6;--creative-soft:#c4cfd610;--premium:#c4cfd6;--premium-soft:#c4cfd610;
 --success:#a0e2c4;--success-soft:#a0e2c414;--warning:#efc987;--warning-soft:#efc98712;--danger:#ffa9ae;--danger-soft:#ffa9ae12;
 --font-sans:"Segoe UI",Arial,ui-sans-serif,system-ui,sans-serif;--font-display:var(--font-sans);--font-body:var(--font-sans);
 --text-xs:12px;--text-sm:14px;--text-md:16px;--text-lg:18px;--text-xl:20px;--title-sm:22px;--title-md:30px;--title-lg:40px;
 --radius-sm:10px;--radius-md:16px;--radius-lg:20px;--radius-xl:26px;
 --shadow-xs:0 1px 2px #0002;--shadow-soft:0 8px 28px #0001;--shadow:0 20px 60px #0003;
 --container:1240px;--container-wide:1460px;--display:clamp(44px,6vw,84px);
 --ui-text:var(--text-100);--ui-muted:var(--text-400);--ui-faint:var(--text-500);--ui-border:var(--line);--ui-accent:var(--accent);--ui-panel:var(--surface-1);--ui-input:var(--surface-0);
 --ui-card-pad:28px;--ui-control-height:48px;--ui-radius:16px;
}