/* ============================================================
   Steelhive design tokens.

   This file is the SINGLE SOURCE OF TRUTH for color, type,
   spacing, radius, shadow, and motion in the Steelhive UI.

   Rules (also enforced by tests/js/design-system.test.js):
   - Raw hex literals are allowed ONLY inside the :root block.
   - Every variable name listed in docs/ui/ui-manifest.md § 12.1
     must be defined below.
   - Component CSS must consume these via var(--...). No new
     hex literals outside this file.

   Contract: docs/ui/ui-manifest.md (Section 12 — Code mapping)
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- Surfaces (dark neutral ramp) ---- */
  --surface: #070707;
  --surface-dim: #070707;
  --surface-bright: #2a2a2a;
  --surface-container-lowest: #030303;
  --surface-container-low: #0d0d0d;
  --surface-container: #0f0f0f;
  --surface-container-high: #1c1c1c;
  --surface-container-highest: #232323;
  --background: #070707;

  /* ---- Foreground on surfaces ---- */
  --on-surface: #faeae4;
  --on-surface-variant: #ccb9b1;
  --on-background: #faeae4;
  --inverse-surface: #faeae4;
  --inverse-on-surface: #1a0c00;

  /* ---- Outlines and dividers ---- */
  --outline: #6a6a6a;
  --outline-variant: #363636;

  /* ---- Brand (Brick family) ---- */
  --primary: #f0a07a;
  --primary-container: #d6481b;
  --on-primary: #1a0c00;
  --on-primary-container: #1a0c00;
  --inverse-primary: #9d3414;
  --surface-tint: #f0a07a;

  /* ---- Brand semantic aliases ---- */
  --brand: #d6481b;
  --brand-soft: #f0a07a;
  --on-brand: #1a0c00;

  /* ---- Secondary (neutrals) ---- */
  --secondary: #c7c6c6;
  --on-secondary: #2f3131;
  --secondary-container: #484949;
  --on-secondary-container: #b8b8b8;

  /* ---- Tertiary (warm beige) ---- */
  --tertiary: #e5c09f;
  --on-tertiary: #422c14;
  --tertiary-container: #b89677;
  --on-tertiary-container: #462f18;

  /* ---- Status (derived; see manifest § 2.7) ---- */
  --success: #6fb35a;
  --on-success: #0f2117;
  --success-container: #284120;
  --on-success-container: #cfe6c6;

  --warning: #d99a2b;
  --on-warning: #2f220e;
  --warning-container: #523b14;
  --on-warning-container: #efdec1;

  --error: #c9503f;
  --on-error: #2d1512;
  --error-container: #4d201a;
  --on-error-container: #eccac6;

  --info: #7d9bba;
  --on-info: #16232f;
  --info-container: #24374b;
  --on-info-container: #cbd8e6;

  /* ---- Typography ---- */
  --font-display: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 48px;
  --text-2xl-mobile: 28px;

  /* ---- Spacing (8 px base) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Breakpoints ---- */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1280px;

  /* ---- Container ---- */
  --container-max: 1280px;
  --container-padding-mobile: var(--space-4);
  --container-padding-desktop: var(--space-12);

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

  /* ---- Shadows (industrial — hard, not soft) ---- */
  --shadow-none: none;
  --shadow-sm: 0 1px 0 var(--outline-variant);
  --shadow-md: 0 2px 0 var(--outline-variant);
  --shadow-lg: 0 4px 0 var(--outline-variant), 0 0 0 1px var(--outline-variant);
  --shadow-xl: 0 6px 0 var(--outline-variant), 0 0 0 1px var(--outline-variant);
  --shadow-focus: 0 0 0 2px var(--primary-container);

  /* ---- Scrim (modal/popover backdrop + disabled-card overlay) ----
     Three alphas because we have three semantic uses in the UI:
       --scrim-strong  modal/dialog backdrop (heavy dim, user attention)
       --scrim-soft    secondary overlay (dropdown anchor dim) — reserved
       --scrim-weak    disabled-card / unavailable-state overlay */
  --scrim-strong: rgba(0, 0, 0, 0.7);
  --scrim-soft:   rgba(0, 0, 0, 0.4);
  --scrim-weak:   rgba(0, 0, 0, 0.2);

  /* ---- Motion ---- */
  --motion-fast: 150ms;
  --motion-normal: 250ms;
  --motion-slow: 350ms;
  --easing-default: cubic-bezier(0.2, 0, 0, 1);
  --easing-snappy: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Brand logo ----
     Header wordmark (landing .landing-header + app .app-topbar).
     Keep landing.css and styles.css .brand-logo--md in sync via this token. */
  --brand-logo-header-height: 40px;
}

/* ============================================================
   Legacy aliases (Phase 0.1 theme bridge).

   These names predate the SteelHive token system. The component CSS
   in styles.css references them directly. Until those references are
   migrated to canonical SteelHive names (Phase 2.x), the aliases here
   keep the cascade resolving and recolor the app in one cascade pass.

   Do NOT add new aliases unless you are bridging an existing legacy
   name. New CSS code should consume canonical names only.

   Bare-name status tokens (--success, --warning, --error, --info,
   --font-mono) are intentionally NOT re-aliased here -- the canonical
   SteelHive declarations above already own those names, so deleting
   styles.css's own :root block hands them over automatically.
   ============================================================ */

:root {
  /* Surfaces and text */
  --primary-50:  var(--on-surface);
  --primary-100: var(--on-surface);
  --primary-200: var(--on-surface-variant);
  --primary-300: var(--on-surface-variant);
  --primary-400: var(--outline);
  --primary-500: var(--outline);
  --primary-600: var(--outline-variant);
  --primary-700: var(--outline-variant);
  --primary-800: var(--surface-container);
  --primary-900: var(--surface);

  /* Accent colours */
  --accent-blue:       var(--brand);
  --accent-blue-light: var(--brand-soft);
  --accent-cyan:       var(--brand);
  --accent-teal:       var(--success);

  /* Status -light / -dark pairs.
     Verified usage (status indicators, banners, danger-button hover):
       background: var(--xxx-light); color: var(--xxx-dark);
     On a dark theme the SteelHive container token IS the tinted
     background, and on-container IS the high-contrast text. */
  --success-light: var(--success-container);
  --success-dark:  var(--on-success-container);
  --warning-light: var(--warning-container);
  --warning-dark:  var(--on-warning-container);
  --error-light:   var(--error-container);
  --error-dark:    var(--on-error-container);
  --info-light:    var(--info-container);
  --info-dark:     var(--on-info-container);

  /* Typography */
  --font-family: var(--font-body);

  /* Spacing */
  --space-xs:  var(--space-1);
  --space-sm:  var(--space-2);
  --space-md:  var(--space-4);
  --space-lg:  var(--space-6);
  --space-xl:  var(--space-8);
  --space-2xl: var(--space-12);

  /* Radius: NO aliases. Legacy --radius-sm/md/lg/xl share names with
     the SteelHive scale but had different values:
       legacy:    sm=6px md=8px  lg=12px xl=16px
       SteelHive: sm=2px md=6px  lg=8px  xl=12px
     Aliasing here would clobber the SteelHive primary declarations and
     break the token contract for future code. Instead we let SteelHive
     win: every legacy radius consumer aligns to the SteelHive scale,
     producing a -2 to -4px shrink across the board (industrial sharper
     corners, matches manifest s 4.5 intent). Wider shift than the v2
     plan originally scoped; recorded in manifest s 14 changelog. */

  /* Shadows (--shadow-sm/md/lg/xl are bare-name canonicals declared
     above with hard-tonal values; no alias needed). */

  /* Transitions (combine duration + easing as shorthand) */
  --transition-fast:   var(--motion-fast)   var(--easing-default);
  --transition-normal: var(--motion-normal) var(--easing-default);
  --transition-slow:   var(--motion-slow)   var(--easing-default);

}