/* ==========================================================================
   Design Tokens — Centered Networks
   Microsoft-adjacent: Segoe UI Variable, Communication Blue, Fluent neutrals,
   microsoft.com/industry aesthetic. Source-of-truth: DESIGN.md + spec at
   docs/superpowers/specs/2026-05-19-cn-microsoft-native-brand-pivot-design.md
   ========================================================================== */

:root {
  /* --- Brand --- */
  --color-brand-primary:  #0078D4;
  --color-brand-hover:    #106EBE;
  --color-brand-pressed:  #005A9E;
  --color-cta:            #0078D4;
  --color-cta-dark:       #106EBE;

  --color-deep-navy:      #243A5E;
  --color-deep-navy-ink:  #0F2A4A;

  --color-microsoft-blue: #0078D4;
  --color-cn-accent:      #CA5010;
  --color-accent:         #CA5010;
  --color-accent-soft:    #E07535;
  --color-accent-pale:    #FADBC8;

  /* Extended legacy refs — point at the new system so any orphan downstream
     reference renders coherently */
  --color-navy:           #0F2A4A;
  --color-deep-blue:      #243A5E;
  --color-royal-blue:     #243A5E;
  --color-sky-blue:       #C8C6C4;
  --color-light-blue:     #C8C6C4;
  --color-accent-blue:    #C8C6C4;
  --color-brand-primary-dark: #005A9E;
  --color-brand-primary-light-10: #EFF6FC;
  --color-brand-primary-light-20: #C7E0F4;

  /* --- Neutrals (Fluent grayscale) --- */
  --color-paper:          #FFFFFF;
  --color-paper-deep:     #F5F5F5;
  --color-surface-alt:    #F5F5F5;
  --color-surface-card:   #FAFAFA;
  --color-section-bg:     #FFFFFF;
  --color-surface:        #FFFFFF;
  --color-surface-light:  #FFFFFF;
  --color-white:          #FFFFFF;

  --color-ink:            #201F1E;
  --color-ink-soft:       #605E5C;
  --color-ink-quiet:      #8A8886;
  --color-body-text:      #605E5C;
  --color-body-text-light: #605E5C;
  --color-charcoal:       #201F1E;
  --color-dark-charcoal:  #201F1E;
  --color-dark-gray:      #605E5C;
  --color-gray:           #605E5C;
  --color-medium-gray:    #8A8886;
  --color-light-gray:     #D2D0CE;
  --color-border:         #EDEBE9;
  --color-border-light:   #EDEBE9;
  --color-border-strong:  #D2D0CE;

  /* --- On-dark --- */
  --color-on-dark:        #FFFFFF;
  --color-on-dark-soft:   #C8C6C4;
  --color-on-dark-link:   #C8C6C4;
  --color-on-dark-border: rgba(255, 255, 255, 0.16);
  --color-hero-grid:      rgba(255, 255, 255, 0.03);

  /* --- Semantic --- */
  --color-success:        #107C10;
  --color-warning:        #CA5010;
  --color-error:          #A4262C;

  /* --- Typography --- */
  --font-body:    "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI",
                  -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI",
                  -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-display);
  --font-editorial: var(--font-display);
  --font-mono:    "Cascadia Code", "Cascadia Mono", ui-monospace, Consolas,
                  "SFMono-Regular", monospace;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold: 700;

  /* Type scale */
  --text-hero:     clamp(2.5rem, 4.5vw, 4rem);
  --text-hero-sm:  clamp(2.25rem, 3.6vw, 3.25rem);  /* white-on-navy hero, one step down */
  --text-h1:       clamp(2rem, 3vw, 2.75rem);
  --text-h2:       clamp(1.5rem, 2vw, 2rem);
  --text-h3:       1.25rem;
  --text-h4:       1rem;
  --text-body-lg:  1.125rem;
  --text-body:     1rem;
  --text-small:    0.875rem;
  --text-caption:  0.75rem;

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-display: 1.15;

  /* No tracking anywhere. Microsoft does not track-tighten. */
  --tracking-tight:   -0.01em;
  --tracking-display: -0.01em;
  --tracking-normal:  0;
  --tracking-loose:   0;
  --tracking-caption: 0;

  /* --- Spacing (4px base grid) --- */
  --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-10: 4rem;
  --space-12: 5rem;
  --space-16: 6rem;
  --space-20: 7.5rem;
  --space-24: 9rem;

  /* --- Layout --- */
  --container-max:        1248px;
  --container-narrow:     768px;
  --container-editorial:  880px;
  --container-wide:       1440px;
  --gutter:               clamp(1rem, 4vw, 2rem);
  --measure-prose:        38rem;
  --measure-narrow:       32rem;

  /* --- Sections --- */
  --section-y:    clamp(3rem, 8vw, 6rem);
  --section-y-lg: clamp(4rem, 10vw, 7.5rem);

  /* --- Radius --- */
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-xl:    8px;
  --radius-full:  9999px;

  /* --- Shadows (Fluent depth) --- */
  --shadow-sm:    0 1.6px 3.6px rgba(0, 0, 0, 0.13), 0 0.3px 0.9px rgba(0, 0, 0, 0.10);
  --shadow-md:    0 3.2px 7.2px rgba(0, 0, 0, 0.13), 0 0.6px 1.8px rgba(0, 0, 0, 0.11);
  --shadow-lg:    0 6.4px 14.4px rgba(0, 0, 0, 0.13), 0 1.2px 3.6px rgba(0, 0, 0, 0.11);
  --shadow-xl:    0 6.4px 14.4px rgba(0, 0, 0, 0.13), 0 1.2px 3.6px rgba(0, 0, 0, 0.11);
  --shadow-2xl:   0 6.4px 14.4px rgba(0, 0, 0, 0.13), 0 1.2px 3.6px rgba(0, 0, 0, 0.11);
  --shadow-glow:        var(--shadow-sm);
  --shadow-glow-strong: var(--shadow-md);

  /* No glassmorphism. Glass tokens preserved as opaque fallbacks. */
  --glass-bg-dark:     #243A5E;
  --glass-bg-light:    #FFFFFF;
  --glass-border-dark: rgba(255, 255, 255, 0.08);
  --glass-border-light: rgba(17, 24, 28, 0.08);
  --blur-md: blur(0);
  --blur-lg: blur(0);

  /* --- Motion ---
     Ease-out exponential curves only. No bounce, no elastic. The motion law:
     calm vs busy is set by easing and speed, not by whether things move.
     Tune all timing here; every animation in the system references these. */

  /* Easing — ease-out family. Decelerate-max, never overshoot. */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft:  cubic-bezier(0.2, 0, 0, 1);

  /* Durations */
  --dur-micro:     150ms;   /* hover/focus state changes */
  --dur-base:      280ms;   /* component-level transitions */
  --dur-entrance:  560ms;   /* entrance + scroll-reveal motion */
  --dur-ambient:   28s;     /* living-hero ambient drift loop */

  /* Stagger steps */
  --stagger-hero:   70ms;   /* hero entrance choreography step */
  --stagger-group:  80ms;   /* scroll-reveal stagger-group step */

  /* Composed shorthands */
  --motion-curve:   var(--ease-out-soft);
  --motion-fast:    var(--dur-micro) var(--ease-out-quart);
  --motion-medium:  var(--dur-base) var(--ease-out-quart);
  --motion-slow:    var(--dur-entrance) var(--ease-out-expo);
  --transition-fast:    var(--dur-micro) var(--ease-out-quart);
  --transition-base:    var(--dur-base) var(--ease-out-quart);
  --transition-slow:    var(--dur-entrance) var(--ease-out-expo);
  --transition-bounce:  var(--dur-base) var(--ease-out-quart);

  /* --- Header --- */
  --header-height:        76px;
  --header-height-mobile: 60px;

  /* --- Z-index --- */
  --z-negative: -1;
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;

  /* --- Retired-but-referenced (point to safe fallbacks so any orphan utility
     class neutralizes to current theme) --- */
  --gradient-main:    var(--color-brand-primary);
  --gradient-dark:    var(--color-deep-navy);
  --gradient-accent:  var(--color-brand-primary);
  --gradient-hero:    var(--color-deep-navy);
  --text-gradient-primary: var(--color-ink);
  --text-gradient-accent:  var(--color-brand-primary);
  --gradient-mesh:        transparent;
  --gradient-epic-mesh:   transparent;
}