/* ==========================================================================
   Canonical 3-Layer Gemba Design System + SmoothUI Token Spine (--gem-*)
   Grounded in:
     - /Users/lego/dev/gemba-designsystem/src/mobile/fork-smoothui/design-system/colors_and_type.css
     - ~/.gemini/design-systems/smoothui/vendor/registry/tokens.json
   Requirements: D9.1, D26, UIUX-01, T02, T42
   ========================================================================== */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* ------------------------------------------------------------------------
     Layer 1: Primitive Scale Tokens (Typography, 4pt Spacing, Radii, Motion)
     ------------------------------------------------------------------------ */
  --gem-font: 'PT Root UI VF', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --gem-font-ui: 'PT Root UI VF', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --gem-font-num: 'PT Root UI VF', -apple-system, BlinkMacSystemFont, sans-serif;
  --gem-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  --gem-font-sans: var(--gem-font);
  --gem-font-display: var(--gem-font);

  --gem-blue-50: #EFF6FF;
  --gem-blue-100: #DBEAFE;
  --gem-blue-400: #60A5FA;
  --gem-blue-500: #1B65F8;
  --gem-blue-600: #124FD1;
  --gem-blue-700: #1D4ED8;

  --gem-navy-50: #F8FAFC;
  --gem-navy-100: #F1F5F9;
  --gem-navy-200: #E2E8F0;
  --gem-navy-300: #CBD5E1;
  --gem-navy-400: #94A3B8;
  --gem-navy-500: #64748B;
  --gem-navy-600: #475569;
  --gem-navy-700: #334155;
  --gem-navy-800: #1E293B;
  --gem-navy-900: #0F172A;
  --gem-navy-950: #020617;

  --gem-emerald-500: #10B981;
  --gem-emerald-600: #059669;
  --gem-amber-500: #F59E0B;
  --gem-amber-600: #D97706;
  --gem-rose-500: #F43F5E;
  --gem-rose-600: #E11D48;
  --gem-violet-500: #8B5CF6;
  --gem-violet-600: #7C3AED;
  --gem-cyan-500: #06B6D4;
  --gem-cyan-600: #0891B2;

  --gem-h1-size: 32px;
  --gem-h1-lh: 40px;
  --gem-h1-weight: 700;
  --gem-h2-size: 24px;
  --gem-h2-lh: 32px;
  --gem-h2-weight: 700;
  --gem-h3-size: 20px;
  --gem-h3-lh: 28px;
  --gem-h3-weight: 700;
  --gem-h4-size: 16px;
  --gem-h4-lh: 24px;
  --gem-h4-weight: 700;
  --gem-h5-size: 14px;
  --gem-h5-lh: 20px;
  --gem-h5-weight: 700;
  --gem-body-size: 14px;
  --gem-body-lh: 20px;
  --gem-body-weight: 400;
  --gem-small-size: 12px;
  --gem-small-lh: 16px;
  --gem-tiny-size: 11px;
  --gem-tiny-lh: 16px;
  --gem-text-xs: 11px;
  --gem-text-sm: 12.5px;
  --gem-text-base: 13.5px;
  --gem-text-md: 15px;
  --gem-text-lg: 16px;
  --gem-weight-semibold: 600;

  --gem-space-1: 4px;
  --gem-space-2: 8px;
  --gem-space-3: 12px;
  --gem-space-4: 16px;
  --gem-space-5: 24px;
  --gem-space-6: 32px;
  --gem-space-7: 40px;
  --gem-space-8: 48px;

  --gem-radius-xs: 4px;
  --gem-radius-sm: 8px;
  --gem-radius-md: 12px;
  --gem-radius-lg: 16px;
  --gem-radius-xl: 24px;
  --gem-radius-pill: 999px;
  --gem-radius-full: 9999px;

  --gem-dur-instant: 80ms;
  --gem-dur-fast: 160ms;
  --gem-dur-base: 240ms;
  --gem-dur-normal: 260ms;
  --gem-dur: 280ms;
  --gem-dur-slow: 420ms;
  --gem-dur-spring: 520ms;
  --gem-duration-spring: var(--gem-dur-spring);
  --gem-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --gem-spring-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --gem-spring-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gem-spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gem-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --gem-motion-spring: var(--gem-dur-spring) var(--gem-spring);

  /* ------------------------------------------------------------------------
     Layer 2: Semantic Tokens (Theme-Aware & White-Label Brand-Aware)
     ------------------------------------------------------------------------ */
  --gem-bg: #F9FAFB;
  --gem-bg2: #F3F5F6;
  --gem-bg-elevated: #FFFFFF;
  --gem-surface: #FFFFFF;
  --gem-surface-elevated: #FFFFFF;
  --gem-surface-subtle: #F3F5F6;
  --gem-surface-emph: #E8EAED;
  --gem-surface-hover: #F3F5F6;
  --gem-surface-glass: rgba(255, 255, 255, 0.86);

  --gem-fg1: #283349;
  --gem-fg2: #697080;
  --gem-fg3: #9499A4;
  --gem-text-primary: var(--gem-fg1);
  --gem-text: var(--gem-fg1);
  --gem-text-secondary: var(--gem-fg2);
  --gem-text-tertiary: var(--gem-fg3);
  --gem-text-muted: var(--gem-fg3);
  --gem-on-dark: #FFFFFF;
  --gem-on-primary: #FFFFFF;

  --gem-border: #E8EAED;
  --gem-border-strong: #D5D8DE;
  --gem-border-hover: #D5D8DE;

  --gem-brand: #283349;
  --gem-brand-on: #FFFFFF;
  --gem-brand-soft: rgba(40, 51, 73, 0.08);
  --gem-ink: #283349;
  --gem-ink-strong: #181D27;

  --gem-accent: #2066E6;
  --gem-accent-hover: #124FD1;
  --gem-accent-soft: rgba(32, 102, 230, 0.10);
  --gem-accent-subtle: rgba(32, 102, 230, 0.10);
  --gem-info: #2066E6;
  --gem-info-soft: rgba(32, 102, 230, 0.10);

  --gem-success: #20982E;
  --gem-success-soft: rgba(32, 152, 46, 0.10);
  --gem-warning: #CD8C00;
  --gem-warning-soft: rgba(205, 140, 0, 0.12);
  --gem-critical: #E95E5E;
  --gem-critical-soft: rgba(233, 94, 94, 0.10);

  --gem-ring: 0 0 0 3px rgba(32, 102, 230, 0.28);
  --gem-ring-color: rgba(32, 102, 230, 0.28);
  --gem-scrim: rgba(24, 29, 39, 0.42);

  /* ------------------------------------------------------------------------
     Layer 3: Component & SmoothUI / AI SDK Tokens
     ------------------------------------------------------------------------ */
  --gem-btn-primary: #283349;
  --gem-btn-primary-hover: #1E2738;
  --gem-btn-emph: #E8EAED;
  --gem-btn-subdued: #F3F5F6;

  --btn-height-sm: 32px;
  --btn-height-touch: 44px;
  --card-padding-compact: 12px;
  --panel-header-height: 44px;
  --spring-duration: var(--gem-dur-spring);

  --gem-shadow-xs: 0px 4px 16px 0px rgba(95, 105, 133, 0.06);
  --gem-shadow-sm: 0px 2px 8px 0px rgba(95, 105, 133, 0.08);
  --gem-shadow-md: 0px 12px 32px 0px rgba(40, 51, 73, 0.16);
  --gem-shadow-card: 0px 4px 16px 0px rgba(95, 105, 133, 0.06);

  --gem-glass: rgba(255, 255, 255, 0.86);
  --gem-glass-border: rgba(40, 51, 73, 0.08);
  --gem-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
  --gem-card-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.90);

  --gem-aisdk-surface: linear-gradient(180deg, rgba(27, 101, 248, 0.05) 0%, rgba(139, 92, 246, 0.03) 100%);
  --gem-aisdk-border: rgba(27, 101, 248, 0.22);
  --gem-aisdk-glow: 0 8px 24px -6px rgba(27, 101, 248, 0.14);
  --gem-smoothui-pill-bg: rgba(40, 51, 73, 0.06);
  --gem-smoothui-pill-active: #FFFFFF;
}

/* ==========================================================================
   Dark Mode Overrides (:root[data-theme="dark"], [data-theme="dark"])
   ========================================================================== */
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;

  --gem-bg: #0D1017;
  --gem-bg2: #1C2230;
  --gem-bg-elevated: #1C2230;
  --gem-surface: #151A24;
  --gem-surface-elevated: #1C2230;
  --gem-surface-subtle: #1C2230;
  --gem-surface-emph: #262D3D;
  --gem-surface-hover: #1C2230;
  --gem-surface-glass: rgba(21, 26, 36, 0.88);

  --gem-fg1: #E8EAED;
  --gem-fg2: #9499A4;
  --gem-fg3: #697080;
  --gem-text-primary: var(--gem-fg1);
  --gem-text: var(--gem-fg1);
  --gem-text-secondary: var(--gem-fg2);
  --gem-text-tertiary: var(--gem-fg3);
  --gem-text-muted: var(--gem-fg2);
  --gem-on-dark: #FFFFFF;
  --gem-on-primary: #FFFFFF;

  --gem-border: #262D3D;
  --gem-border-strong: #353D50;
  --gem-border-hover: #353D50;

  --gem-brand: #3B82F6;
  --gem-brand-on: #FFFFFF;
  --gem-brand-soft: rgba(255, 255, 255, 0.10);
  --gem-ink: #E8EAED;
  --gem-ink-strong: #FFFFFF;

  --gem-accent: #60A5FA;
  --gem-accent-hover: #93C5FD;
  --gem-accent-soft: rgba(96, 165, 250, 0.16);
  --gem-accent-subtle: rgba(96, 165, 250, 0.16);
  --gem-info: #60A5FA;
  --gem-info-soft: rgba(96, 165, 250, 0.16);

  --gem-success: #22C55E;
  --gem-success-soft: rgba(34, 197, 94, 0.16);
  --gem-warning: #F59E0B;
  --gem-warning-soft: rgba(245, 158, 11, 0.18);
  --gem-critical: #F87171;
  --gem-critical-soft: rgba(248, 113, 113, 0.16);

  --gem-ring: 0 0 0 3px rgba(96, 165, 250, 0.35);
  --gem-ring-color: rgba(96, 165, 250, 0.35);
  --gem-scrim: rgba(5, 8, 14, 0.68);

  --gem-btn-primary: #3B82F6;
  --gem-btn-primary-hover: #2563EB;
  --gem-btn-emph: #262D3D;
  --gem-btn-subdued: #1C2230;

  --gem-shadow-xs: 0px 4px 16px 0px rgba(0, 0, 0, 0.35);
  --gem-shadow-sm: 0px 2px 8px 0px rgba(0, 0, 0, 0.45);
  --gem-shadow-md: 0px 12px 32px 0px rgba(0, 0, 0, 0.60);
  --gem-shadow-card: 0px 4px 16px 0px rgba(0, 0, 0, 0.40);

  --gem-glass: rgba(21, 26, 36, 0.88);
  --gem-glass-border: rgba(255, 255, 255, 0.08);
  --gem-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.10);
  --gem-card-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);

  --gem-aisdk-surface: linear-gradient(180deg, rgba(27, 101, 248, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
  --gem-aisdk-border: rgba(69, 137, 255, 0.32);
  --gem-aisdk-glow: 0 8px 28px -6px rgba(27, 101, 248, 0.28);
  --gem-smoothui-pill-bg: rgba(255, 255, 255, 0.08);
  --gem-smoothui-pill-active: #262D3D;
}

/* ==========================================================================
   Coexistence Modes (classic vs smoothui_v2) — SEED-001 Opt-In Coexistence
   ========================================================================== */
:root[data-coexistence="classic"] {
  --gem-dur-spring: 160ms;
  --gem-duration-spring: 160ms;
  --spring-duration: 160ms;
  --gem-spring: cubic-bezier(0.4, 0, 0.2, 1);
  --gem-glass: var(--gem-surface);
  --gem-radius-lg: 8px;
  --gem-radius-xl: 12px;
}

:root[data-coexistence="smoothui_v2"] {
  --gem-dur-spring: 520ms;
  --gem-duration-spring: var(--gem-dur-spring);
  --spring-duration: var(--gem-dur-spring);
  --gem-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   Density Modes (compact vs comfortable)
   ========================================================================== */
:root[data-density="compact"] {
  --card-padding-compact: 8px;
  --gem-space-4: 12px;
  --gem-space-5: 16px;
}

:root[data-density="comfortable"] {
  --card-padding-compact: 12px;
  --gem-space-4: 16px;
  --gem-space-5: 24px;
}

/* ==========================================================================
   Reduced Motion Collapse (OS prefers-reduced-motion or explicit motion mode)
   ========================================================================== */
:root[data-motion="reduced"],
:root[data-motion="none"] {
  --gem-dur-instant: 0ms;
  --gem-dur-fast: 0ms;
  --gem-dur-base: 0ms;
  --gem-dur-normal: 0ms;
  --gem-dur: 0ms;
  --gem-dur-slow: 0ms;
  --gem-dur-spring: 0ms;
  --gem-duration-spring: 0ms;
  --spring-duration: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  :root,
  [data-theme="light"],
  :root[data-theme="dark"],
  [data-theme="dark"],
  :root[data-coexistence="classic"],
  :root[data-coexistence="smoothui_v2"] {
    --gem-dur-instant: 0ms;
    --gem-dur-fast: 0ms;
    --gem-dur-base: 0ms;
    --gem-dur-normal: 0ms;
    --gem-dur: 0ms;
    --gem-dur-slow: 0ms;
    --gem-dur-spring: 0ms;
    --gem-duration-spring: 0ms;
    --spring-duration: 0ms;
  }
}