/*
 * launchkit — Light and dark creation workspace tokens
 * Source of truth: docs/03_UI_DESIGN_SYSTEM.md.
 * These are design tokens, not a finished UI or proof that a feature exists.
 * Font stack uses installed system fonts; this file loads no external assets.
 * Breakpoints must use literal media queries or build-time constants:
 * mobile 0–767px; tablet 768–1023px; desktop 1024–1599px; wide >=1600px.
 */

:root {
  color-scheme: dark;

  /* Core surfaces and text */
  --color-bg: #0a0a0a;
  --color-surface: #151515;
  --color-surface-subtle: #1c1c1b;
  --color-surface-hover: #292928;
  --color-surface-inset: #101010;
  --color-text: #f7f3ea;
  --color-text-secondary: #c2beb4;
  --color-text-muted: #a6a49e;
  --color-text-inverse: #0a0a0a;
  --color-placeholder: #a6a49e;

  /* Main action: lime */
  --color-accent: #d9ff55;
  --color-accent-hover: #e7ff8c;
  --color-accent-pressed: #c3e641;
  --color-accent-soft: #292f18;
  --color-accent-text: #d9ff55;
  --color-link: #d9ff55;
  --color-link-hover: #e7ff8c;
  --color-selection-bg: #d9ff55;
  --color-selection-text: #0a0a0a;

  /* Decorative borders may be subtle. Input/control boundaries use control. */
  --color-border: #333332;
  --color-border-subtle: #282827;
  --color-border-control: #74746c;
  --color-border-hover: #909084;
  --color-border-active: #d9ff55;
  --color-focus: #d9ff55;
  --color-focus-halo: #0a0a0a;

  /* Status colors: always pair with a label and icon. */
  --color-success: #a0eab6;
  --color-success-bg: #14281d;
  --color-success-border: #3d6b4e;
  --color-warning: #ffda8c;
  --color-warning-bg: #292111;
  --color-warning-border: #755a24;
  --color-danger: #ffbab1;
  --color-danger-hover: #ffd5d0;
  --color-danger-bg: #311b1b;
  --color-danger-border: #804646;
  --color-info: #b0d8ff;
  --color-info-bg: #172637;
  --color-info-border: #446787;
  --color-disabled-bg: #252524;
  --color-disabled-text: #a6a49e;
  --color-disabled-border: #444441;

  /* Canvas colors are independent of the site theme. */
  --color-canvas: #f0f3ef;
  --color-canvas-dark: #222925;
  --color-checker-light: #ffffff;
  --color-checker-dark: #e5ebe7;
  --color-markup-red: #d92f3e;
  --color-markup-blue: #2563eb;
  --color-markup-yellow: #f5c542;
  --color-markup-outline: #18251f;
  --color-overlay: rgb(0 0 0 / 60%);
  --color-skeleton: #232323;
  --color-skeleton-highlight: #303030;

  /* Typography */
  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
    "Segoe UI Emoji", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas,
    "Liberation Mono", monospace;
  --font-editorial: Georgia, "Times New Roman", serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-body: 0.9375rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.25rem;
  --font-size-hero: clamp(2rem, 4vw, 3.5rem);
  --line-height-tight: 1.15;
  --line-height-heading: 1.3;
  --line-height-body: 1.55;
  --line-height-label: 1.4;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --letter-spacing-heading: -0.025em;
  --letter-spacing-label: 0;

  /* Spacing */
  --space-0: 0;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Geometry */
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;
  --border-width: 1px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --control-height: 3rem;
  --control-height-compact: 2.5rem;
  --touch-target-min: 2.75rem;
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --checker-size: 0.75rem;

  /* Layout: center canvas takes all remaining width. */
  --public-content-max: 78rem;
  --public-reading-max: 46rem;
  --public-gutter: clamp(1rem, 3vw, 2rem);
  --app-header-height: 4rem;
  --app-nav-width: 13.5rem;
  --app-nav-rail-width: 4.5rem;
  --app-form-width: 20rem;
  --app-form-width-wide: 21.25rem;
  --app-inspector-width: 17rem;
  --app-panel-gap: 1rem;
  --app-preview-min-height: 28rem;
  --modal-width-sm: 28rem;
  --modal-width-md: 40rem;
  --drawer-width: min(26rem, calc(100vw - 1rem));
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-top: env(safe-area-inset-top, 0px);

  /* Elevation */
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 18%);
  --shadow-sm: 0 3px 12px rgb(0 0 0 / 25%);
  --shadow-md: 0 16px 42px rgb(0 0 0 / 34%);
  --shadow-lg: 0 24px 70px rgb(0 0 0 / 48%);
  --shadow-focus: 0 0 0 2px var(--color-focus-halo),
    0 0 0 4px var(--color-focus);

  /* Motion: no animation is needed for core usability. */
  --motion-fast: 100ms;
  --motion-normal: 160ms;
  --motion-slow: 220ms;
  --motion-loading: 1200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);

  /* Stacking: portals must use this order consistently. */
  --z-base: 0;
  --z-sticky: 20;
  --z-popover: 30;
  --z-drawer: 40;
  --z-modal: 50;
  --z-toast: 60;
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #fafaf7;
  --color-surface: #ffffff;
  --color-surface-subtle: #f1f2eb;
  --color-surface-hover: #e8ebdf;
  --color-surface-inset: #f7f8f2;
  --color-text: #151713;
  --color-text-secondary: #53594d;
  --color-text-muted: #62695c;
  --color-placeholder: #697060;
  --color-accent-hover: #c8ee43;
  --color-accent-pressed: #b2d832;
  --color-accent-soft: #edf5d2;
  --color-accent-text: #496500;
  --color-link: #496500;
  --color-link-hover: #304800;
  --color-border: #dfe3d6;
  --color-border-subtle: #e8ebdf;
  --color-border-control: #7f8874;
  --color-border-hover: #59644b;
  --color-border-active: #557500;
  --color-focus: #527100;
  --color-focus-halo: #fafaf7;
  --color-success: #246338;
  --color-success-bg: #e9f6ec;
  --color-success-border: #7daa88;
  --color-warning: #755000;
  --color-warning-bg: #fff6df;
  --color-warning-border: #b99a4b;
  --color-danger: #a12d25;
  --color-danger-hover: #7e211b;
  --color-danger-bg: #fff0ed;
  --color-danger-border: #c48c84;
  --color-info: #225a8e;
  --color-info-bg: #edf5ff;
  --color-info-border: #7d9dbc;
  --color-disabled-bg: #edf0e6;
  --color-disabled-text: #6b7163;
  --color-disabled-border: #d1d6c8;
  --color-skeleton: #e6eadf;
  --color-skeleton-highlight: #f4f6ef;
  --shadow-xs: 0 1px 2px rgb(20 30 10 / 5%);
  --shadow-sm: 0 3px 12px rgb(20 30 10 / 7%);
  --shadow-md: 0 16px 42px rgb(20 30 10 / 10%);
  --shadow-lg: 0 24px 70px rgb(20 30 10 / 15%);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-normal: 0ms;
    --motion-slow: 0ms;
    --motion-loading: 0ms;
  }
}

/* Use outline + text labels in forced-color mode; do not rely on shadows. */
@media (forced-colors: active) {
  :root, :root[data-theme="light"] {
    --color-bg: Canvas;
    --color-surface: Canvas;
    --color-surface-subtle: Canvas;
    --color-text: CanvasText;
    --color-text-secondary: CanvasText;
    --color-text-muted: CanvasText;
    --color-border-control: ButtonText;
    --color-focus: Highlight;
    --color-link: LinkText;
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-focus: none;
  }
}