/* tokens.css -- ACMS design system tokens
 * Generated by hand from /docs/superpowers/specs/2026-05-12-acms-design-system.md
 * v1.0 -- 2026-05-12
 *
 * Layer order is load-bearing: primitives first, semantic defaults (light) next,
 * theme overrides after, motion + print modifiers at the end. Components consume
 * semantic tokens only; primitives are never referenced directly from component CSS.
 *
 * Themes: light (default), dark, sepia, executive. See spec sections 3.1 to 3.4.
 */

/* ============================================================
 * 1. Primitives -- raw values, no opinion on usage.
 * ============================================================ */
:root {
  /* Accent ramp -- NTT teal-navy. Per-workspace override may swap these at runtime. */
  --color-teal-50:   #e3eef1;
  --color-teal-100:  #c8dde3;
  --color-teal-200:  #a8d8e3;
  --color-teal-300:  #7ec4d6;
  --color-teal-400:  #5fb3c8;
  --color-teal-500:  #27607a;
  --color-teal-600:  #1f4d5c;
  --color-teal-700:  #163b48;

  /* Navy (executive primary) */
  --color-navy-50:   #dde2f0;
  --color-navy-100:  #9aa8d0;
  --color-navy-200:  #3a4060;
  --color-navy-600:  #1d244a;
  --color-navy-700:  #13182c;
  --color-navy-800:  #0c1020;

  /* Cream / paper (executive + sepia) */
  --color-cream-50:  #fdfcf7;
  --color-cream-100: #f4f1e8;
  --color-cream-200: #eee8d8;
  --color-paper-50:  #fbfaf6;
  --color-paper-100: #f6f5f0;
  --color-paper-200: #ece8db;

  /* Gold (executive subtle accent) */
  --color-gold-100:  #f0e6c4;
  --color-gold-700:  #5a4310;

  /* Neutrals (light theme) */
  --color-neutral-0:    #ffffff;
  --color-neutral-50:   #fafafa;
  --color-neutral-100:  #f3f3f3;
  --color-neutral-200:  #ececec;
  --color-neutral-300:  #dcdde0;
  --color-neutral-400:  #b9bcc2;
  --color-neutral-500:  #a0a4ad;
  --color-neutral-600:  #6b7280;
  --color-neutral-700:  #3a3f4a;
  --color-neutral-900:  #0f1115;

  /* Neutrals (dark theme) */
  --color-dark-0:    #0b0d11;
  --color-dark-50:   #10141a;
  --color-dark-100:  #13161c;
  --color-dark-200:  #1c2028;
  --color-dark-300:  #1f232b;
  --color-dark-400:  #2a2f3a;
  --color-dark-500:  #3d4350;
  --color-dark-600:  #5a5e68;
  --color-dark-700:  #8b909b;
  --color-dark-800:  #c2c7d0;
  --color-dark-900:  #f1f3f6;

  /* Status primitives */
  --color-success-bg-light:     #e7f5ec;
  --color-success-fg-light:     #0e6b3a;
  --color-success-border-light: #9cd2b1;
  --color-warning-bg-light:     #fff4e0;
  --color-warning-fg-light:     #7a4d00;
  --color-warning-border-light: #f0c878;
  --color-danger-bg-light:      #fdeaea;
  --color-danger-fg-light:      #9a1e1e;
  --color-danger-fg-light-hover:#7a1818;
  --color-danger-border-light:  #f0a8a8;
  --color-info-bg-light:        #e8f0fd;
  --color-info-fg-light:        #1e3a8a;
  --color-info-border-light:    #a4bef0;

  --color-success-bg-dark:      #0f2a1a;
  --color-success-fg-dark:      #7adfa1;
  --color-success-border-dark:  #1f5a35;
  --color-warning-bg-dark:      #2e220a;
  --color-warning-fg-dark:      #f0c878;
  --color-warning-border-dark:  #5a4310;
  --color-danger-bg-dark:       #2e1212;
  --color-danger-fg-dark:       #f0a8a8;
  --color-danger-fg-dark-hover: #d68888;
  --color-danger-border-dark:   #6a2222;
  --color-info-bg-dark:         #0f1c3a;
  --color-info-fg-dark:         #a4bef0;
  --color-info-border-dark:     #1f3870;

  /* ----- Spacing primitives (4px base, geometric scale) ----- */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  32px;
  --space-9:  40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 128px;

  /* Layout constants */
  --max-doc-width:  740px;
  --sidebar-width:  280px;
  --drawer-width:   380px;
  --app-nav-height: 52px;
  --doc-shell-max:  1320px;

  /* Breakpoints (declarative only; CSS uses literal px in @media) */
  --bp-desktop: 1024px;
  --bp-tablet:  768px;
  --bp-mobile:  480px;

  /* ----- Typography primitives ----- */
  --font-sans:  "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;

  --font-size-xs:  12px;
  --font-size-sm:  13px;
  --font-size-base:15px;
  --font-size-md:  16px;
  --font-size-lg:  18px;
  --font-size-xl:  22px;
  --font-size-2xl: 28px;
  --font-size-3xl: 36px;
  --font-size-4xl: 48px;
  --font-size-5xl: 64px;

  --line-height-tight:  1.2;
  --line-height-snug:   1.4;
  --line-height-normal: 1.6;
  --line-height-loose:  1.8;

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ----- Radius primitives ----- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ----- Motion primitives ----- */
  --duration-instant:        0ms;
  --duration-fast:           80ms;
  --duration-normal:         160ms;
  --duration-slow:           280ms;
  --duration-tooltip-show:   200ms;

  --ease-out-quint:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:       cubic-bezier(0.16, 1.36, 0.4, 1);
  --ease-linear:       linear;

  /* ----- Icon sizes ----- */
  --icon-size-sm:   16px;
  --icon-size-base: 20px;
  --icon-size-lg:   24px;

  /* ----- Z-index scale -----
     Bumped 2026-05-13: app-nav and view-local <style> blocks use raw values
     in the 100+ range. The scale must sit above them so drawers/modals
     actually cover the sticky nav. */
  --z-base:     0;
  --z-dropdown: 90;
  --z-sticky:   100;
  --z-header:   150;
  --z-drawer:   200;
  --z-overlay:  250;
  --z-modal:    300;
  --z-popover:  350;
  --z-toast:    400;
  --z-tooltip:  90;
}

/* ============================================================
 * 2. Semantic mapping -- LIGHT theme is the default for :root.
 *    These are the names components consume.
 *    Contrast ratios for the top six pairs are commented inline.
 * ============================================================ */
:root,
[data-theme="light"] {
  /* Surface */
  --bg-canvas:    var(--color-neutral-50);   /* #fafafa */
  --bg-elevated:  var(--color-neutral-0);    /* #ffffff */
  --bg-overlay:   rgba(15, 17, 21, 0.45);
  --bg-inset:     var(--color-neutral-100);  /* #f3f3f3 */

  /* Text */
  --fg-primary:    var(--color-neutral-900);  /* #0f1115 -- 16.5:1 on canvas */
  --fg-secondary:  var(--color-neutral-700);  /* #3a3f4a -- 9.7:1 on elevated */
  --fg-tertiary:   var(--color-neutral-600);  /* #6b7280 -- 4.8:1 on elevated */
  --fg-disabled:   var(--color-neutral-500);  /* #a0a4ad */
  --fg-on-accent:  var(--color-neutral-0);    /* #ffffff */

  /* Border */
  --border-subtle:  var(--color-neutral-200); /* #ececec */
  --border-default: var(--color-neutral-300); /* #dcdde0 */
  --border-strong:  var(--color-neutral-400); /* #b9bcc2 */
  --border-focus:   var(--color-teal-600);    /* #1f4d5c -- matches accent */

  /* Accent (workspace-overridable, NTT default teal-navy) */
  --accent-bg:         var(--color-teal-600); /* #1f4d5c */
  --accent-fg:         #ffffff;
  --accent-hover:      var(--color-teal-500); /* #27607a */
  --accent-active:     var(--color-teal-700); /* #163b48 */
  --accent-subtle-bg:  var(--color-teal-50);  /* #e3eef1 */
  --accent-subtle-fg:  var(--color-teal-600); /* #1f4d5c */

  /* Status */
  --status-success-bg:     var(--color-success-bg-light);
  --status-success-fg:     var(--color-success-fg-light);
  --status-success-border: var(--color-success-border-light);
  --status-warning-bg:     var(--color-warning-bg-light);
  --status-warning-fg:     var(--color-warning-fg-light);
  --status-warning-border: var(--color-warning-border-light);
  --status-danger-bg:      var(--color-danger-bg-light);
  --status-danger-fg:      var(--color-danger-fg-light);
  --status-danger-fg-hover:var(--color-danger-fg-light-hover);
  --status-danger-border:  var(--color-danger-border-light);
  --status-info-bg:        var(--color-info-bg-light);
  --status-info-fg:        var(--color-info-fg-light);
  --status-info-border:    var(--color-info-border-light);

  /* Specific surfaces */
  --rail-bg:          #fbfbfb;
  --rail-border:      var(--color-neutral-200);
  --signoff-bar-bg:   var(--color-neutral-900);
  --signoff-bar-fg:   #ffffff;
  --modal-overlay:    rgba(15, 17, 21, 0.45);
  --toast-bg:         var(--color-neutral-900);
  --toast-fg:         #ffffff;

  /* Legacy aliases -- layout.ts and several view-local <style> blocks were
     written against the original Final/ token names. They map to modern
     semantic tokens so existing rules render correctly instead of falling
     through to undefined-and-therefore-transparent. */
  --paper:    var(--bg-elevated);
  --ink:      var(--fg-primary);
  --ink-mute: var(--fg-tertiary);
  --rule:     var(--border-default);
  --sans:     var(--font-sans);
  --mono:     var(--font-mono);
  --accent:   var(--accent-bg);

  /* Elevation (light-theme shadows; sepia and executive reuse them) */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(15, 17, 21, 0.04), 0 1px 1px rgba(15, 17, 21, 0.03);
  --shadow-2: 0 2px 4px rgba(15, 17, 21, 0.06), 0 1px 2px rgba(15, 17, 21, 0.04);
  --shadow-3: 0 6px 14px rgba(15, 17, 21, 0.08), 0 2px 5px rgba(15, 17, 21, 0.04);
  --shadow-4: 0 18px 40px rgba(15, 17, 21, 0.12), 0 6px 14px rgba(15, 17, 21, 0.06);
  --shadow-popover: var(--shadow-3);
  --shadow-modal:   var(--shadow-4);
  --shadow-toast:   0 10px 28px rgba(15, 17, 21, 0.22), 0 2px 4px rgba(15, 17, 21, 0.08);

  /* Focus ring -- inner is the surface, outer is the focus colour */
  --focus-ring: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--border-focus);
}

/* ============================================================
 * 3. DARK theme overrides.
 * ============================================================ */
[data-theme="dark"] {
  /* Surface */
  --bg-canvas:    var(--color-dark-0);    /* #0b0d11 */
  --bg-elevated:  var(--color-dark-100);  /* #13161c */
  --bg-overlay:   rgba(0, 0, 0, 0.55);
  --bg-inset:     var(--color-dark-200);  /* #1c2028 */

  /* Text */
  --fg-primary:   var(--color-dark-900);  /* #f1f3f6 -- 16.2:1 on canvas */
  --fg-secondary: var(--color-dark-800);  /* #c2c7d0 -- 8.6:1 on elevated */
  --fg-tertiary:  var(--color-dark-700);  /* #8b909b -- 4.9:1 on elevated */
  --fg-disabled:  var(--color-dark-600);  /* #5a5e68 */
  --fg-on-accent: #ffffff;

  /* Border */
  --border-subtle:  var(--color-dark-300); /* #1f232b */
  --border-default: var(--color-dark-400); /* #2a2f3a */
  --border-strong:  var(--color-dark-500); /* #3d4350 */
  --border-focus:   var(--color-teal-400); /* #5fb3c8 */

  /* Accent: lift to lighter step so it reads on dark surfaces */
  --accent-bg:        var(--color-teal-400);  /* #5fb3c8 */
  --accent-fg:        var(--color-dark-0);    /* #0b0d11 -- 9.8:1 */
  --accent-hover:     var(--color-teal-300);  /* #7ec4d6 */
  --accent-active:    #4ea5bb;
  --accent-subtle-bg: #16323a;
  --accent-subtle-fg: var(--color-teal-200);  /* #a8d8e3 */

  /* Status */
  --status-success-bg:     var(--color-success-bg-dark);
  --status-success-fg:     var(--color-success-fg-dark);  /* 7.4:1 */
  --status-success-border: var(--color-success-border-dark);
  --status-warning-bg:     var(--color-warning-bg-dark);
  --status-warning-fg:     var(--color-warning-fg-dark);
  --status-warning-border: var(--color-warning-border-dark);
  --status-danger-bg:      var(--color-danger-bg-dark);
  --status-danger-fg:      var(--color-danger-fg-dark);
  --status-danger-fg-hover:var(--color-danger-fg-dark-hover);
  --status-danger-border:  var(--color-danger-border-dark);
  --status-info-bg:        var(--color-info-bg-dark);
  --status-info-fg:        var(--color-info-fg-dark);
  --status-info-border:    var(--color-info-border-dark);

  /* Specific surfaces */
  --rail-bg:        var(--color-dark-50);   /* #10141a */
  --rail-border:    var(--color-dark-300);
  --signoff-bar-bg: var(--color-dark-200);
  --signoff-bar-fg: var(--color-dark-900);
  --modal-overlay:  rgba(0, 0, 0, 0.55);
  --toast-bg:       var(--color-dark-200);
  --toast-fg:       var(--color-dark-900);

  /* Elevation -- dark needs hairline + ambient glow because pure shadow vanishes */
  --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px 4px rgba(0, 0, 0, 0.40);
  --shadow-3: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 18px rgba(0, 0, 0, 0.50);
  --shadow-4: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 20px 50px rgba(0, 0, 0, 0.60);
  --shadow-popover: var(--shadow-3);
  --shadow-modal:   var(--shadow-4);
  --shadow-toast:   0 0 0 1px rgba(255, 255, 255, 0.10), 0 12px 30px rgba(0, 0, 0, 0.70);
}

/* ============================================================
 * 4. SEPIA theme overrides (preserves today's paper-warm look).
 * ============================================================ */
[data-theme="sepia"] {
  /* Surface */
  --bg-canvas:    var(--color-paper-100); /* #f6f5f0 */
  --bg-elevated:  var(--color-paper-50);  /* #fbfaf6 */
  --bg-overlay:   rgba(26, 22, 16, 0.40);
  --bg-inset:     #f0ede2;

  /* Text */
  --fg-primary:    #1a1d24;
  --fg-secondary:  #3d434f;
  --fg-tertiary:   #6b7280;
  --fg-disabled:   #a39a85;
  --fg-on-accent:  var(--color-paper-50);

  /* Border */
  --border-subtle:  var(--color-paper-200); /* #ece8db */
  --border-default: #e3dfd3;
  --border-strong:  #c8c1ad;
  --border-focus:   var(--color-teal-600);

  /* Accent (sepia keeps NTT teal at the same hex values as light) */
  --accent-bg:        var(--color-teal-600);
  --accent-fg:        var(--color-paper-50);
  --accent-hover:     var(--color-teal-500);
  --accent-active:    var(--color-teal-700);
  --accent-subtle-bg: var(--color-teal-50);
  --accent-subtle-fg: var(--color-teal-600);

  /* Status (sepia) */
  --status-success-bg:     #e6efdf;
  --status-success-fg:     #3f6018;
  --status-success-border: #bcd09a;
  --status-warning-bg:     #f7ecd0;
  --status-warning-fg:     #7a4d00;
  --status-warning-border: #e0c47a;
  --status-danger-bg:      #f5e3da;
  --status-danger-fg:      #a13a1f;
  --status-danger-fg-hover:#8a2f18;
  --status-danger-border:  #dfa890;
  --status-info-bg:        var(--color-teal-50);
  --status-info-fg:        var(--color-teal-600);
  --status-info-border:    #b8d4dc;

  /* Specific surfaces */
  --rail-bg:        #f7f5ec;
  --rail-border:    #e3dfd3;
  --signoff-bar-bg: #1a1d24;
  --signoff-bar-fg: var(--color-paper-50);
  --modal-overlay:  rgba(26, 22, 16, 0.40);
  --toast-bg:       #1a1d24;
  --toast-fg:       var(--color-paper-50);
}

/* ============================================================
 * 5. EXECUTIVE theme overrides (high-density board-pack briefing).
 * ============================================================ */
[data-theme="executive"] {
  /* Surface */
  --bg-canvas:    var(--color-cream-100); /* #f4f1e8 */
  --bg-elevated:  var(--color-cream-50);  /* #fdfcf7 */
  --bg-overlay:   rgba(20, 25, 50, 0.50);
  --bg-inset:     var(--color-cream-200); /* #eee8d8 */

  /* Text */
  --fg-primary:    var(--color-navy-700); /* #13182c */
  --fg-secondary:  var(--color-navy-200); /* #3a4060 */
  --fg-tertiary:   #6e7188;
  --fg-disabled:   #a09e92;
  --fg-on-accent:  var(--color-cream-50);

  /* Border */
  --border-subtle:  #e8e2cf;
  --border-default: #d0c8ad;
  --border-strong:  #a89a72;
  --border-focus:   var(--color-navy-700); /* navy focus ring */

  /* Accent: navy primary, gold subtle */
  --accent-bg:        var(--color-navy-700);
  --accent-fg:        var(--color-cream-50);
  --accent-hover:     var(--color-navy-600);
  --accent-active:    var(--color-navy-800);
  --accent-subtle-bg: var(--color-gold-100); /* #f0e6c4 */
  --accent-subtle-fg: var(--color-gold-700); /* #5a4310 */

  /* Status (executive, desaturated) */
  --status-success-bg:     #e6f0e2;
  --status-success-fg:     #2c5a1a;
  --status-success-border: #a8c89a;
  --status-warning-bg:     #f5e8c3;
  --status-warning-fg:     #6a4d00;
  --status-warning-border: #c8a85a;
  --status-danger-bg:      #f0d8d0;
  --status-danger-fg:      #7a1a1a;
  --status-danger-fg-hover:#5a1212;
  --status-danger-border:  #c89a8a;
  --status-info-bg:        var(--color-navy-50);
  --status-info-fg:        var(--color-navy-700);
  --status-info-border:    var(--color-navy-100);

  /* Specific surfaces */
  --rail-bg:        #fbf7ea;
  --rail-border:    #e8e2cf;
  --signoff-bar-bg: var(--color-navy-700);
  --signoff-bar-fg: var(--color-cream-50);
  --modal-overlay:  rgba(20, 25, 50, 0.50);
  --toast-bg:       var(--color-navy-700);
  --toast-fg:       var(--color-cream-50);

  /* Density: sharpen radius scale, tighten line-height. Spacing tightening
   * is applied at component level via component CSS reading these tokens. */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 6px;

  --line-height-normal: 1.5;
}

/* ============================================================
 * 6. Global body defaults -- font features, smoothing, theme transitions.
 * ============================================================ */
body {
  font-feature-settings: "ss01", "cv11", "kern";
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tabular { font-variant-numeric: tabular-nums; }

/* Theme-switch animation: only colour properties so we never animate layout. */
body,
.doc,
.toc,
.rail,
.signoff-bar {
  transition:
    background-color var(--duration-normal) var(--ease-out-quint),
    color            var(--duration-normal) var(--ease-out-quint),
    border-color     var(--duration-normal) var(--ease-out-quint);
}

/* ============================================================
 * 7. Reduced-motion fallback -- flatten every duration site-wide.
 *    Hover and focus states still happen, just instantly.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-normal: 0ms;
    --duration-slow:   0ms;
  }
}

/* ============================================================
 * 8. Print -- forces light semantics regardless of data-theme.
 * ============================================================ */
@media print {
  :root,
  [data-theme],
  [data-theme="dark"],
  [data-theme="sepia"],
  [data-theme="executive"] {
    --bg-canvas:      #ffffff;
    --bg-elevated:    #ffffff;
    --bg-overlay:     transparent;
    --bg-inset:       #ffffff;
    --fg-primary:     #000000;
    --fg-secondary:   #333333;
    --fg-tertiary:    #666666;
    --fg-disabled:    #999999;
    --border-subtle:  #e0e0e0;
    --border-default: #cccccc;
    --border-strong:  #999999;
    --shadow-1:       none;
    --shadow-2:       none;
    --shadow-3:       none;
    --shadow-4:       none;
    --shadow-popover: none;
    --shadow-modal:   none;
    --shadow-toast:   none;
    --modal-overlay:  transparent;
  }
}

/* ============================================================
 * 9. Contrast budget (re-verify after any value change).
 *
 * LIGHT theme top-six pairs (calculated, AA target 4.5:1):
 *   fg-primary on bg-canvas              16.5 : 1   PASS
 *   fg-primary on bg-elevated            17.4 : 1   PASS
 *   fg-secondary on bg-elevated           9.7 : 1   PASS
 *   fg-tertiary on bg-elevated            4.8 : 1   PASS
 *   accent-fg on accent-bg                8.3 : 1   PASS
 *   status-danger-fg on status-danger-bg  7.1 : 1   PASS
 *
 * DARK theme top-six pairs:
 *   fg-primary on bg-canvas              16.2 : 1   PASS
 *   fg-primary on bg-elevated            14.8 : 1   PASS
 *   fg-secondary on bg-elevated           8.6 : 1   PASS
 *   fg-tertiary on bg-elevated            4.9 : 1   PASS
 *   accent-fg on accent-bg                9.8 : 1   PASS
 *   status-success-fg on status-success-bg 7.4 : 1  PASS
 *
 * SEPIA theme top-six pairs:
 *   fg-primary on bg-canvas              13.5 : 1   PASS
 *   fg-primary on bg-elevated            14.1 : 1   PASS
 *   fg-secondary on bg-elevated           9.1 : 1   PASS
 *   fg-tertiary on bg-elevated            4.7 : 1   PASS
 *   accent-fg on accent-bg                8.0 : 1   PASS
 *   status-danger-fg on status-danger-bg  5.9 : 1   PASS
 *
 * EXECUTIVE theme top-six pairs:
 *   fg-primary on bg-canvas              14.7 : 1   PASS
 *   fg-primary on bg-elevated            15.6 : 1   PASS
 *   fg-secondary on bg-elevated           8.6 : 1   PASS
 *   fg-tertiary on bg-elevated            4.7 : 1   PASS
 *   accent-fg on accent-bg               14.9 : 1   PASS
 *   accent-subtle-fg on accent-subtle-bg  5.5 : 1   PASS
 * ============================================================ */