/*
 * OHDA Global Design Tokens — G2.2 Token Foundation
 *
 * This file defines the shared design-language contract only.
 * Existing pages are not migrated in G2.2; page adoption happens in later pilots.
 */

:root {
  color-scheme: light;

  /* Primitive colors */
  --ohda-color-white: #ffffff;
  --ohda-color-black: #000000;
  --ohda-color-slate-50: #f8fafc;
  --ohda-color-slate-100: #f1f5f9;
  --ohda-color-slate-200: #e2e8f0;
  --ohda-color-slate-300: #cbd5e1;
  --ohda-color-slate-500: #64748b;
  --ohda-color-slate-600: #475569;
  --ohda-color-slate-700: #334155;
  --ohda-color-slate-800: #1e293b;
  --ohda-color-slate-900: #0f172a;
  --ohda-color-blue-50: #eff6ff;
  --ohda-color-blue-100: #dbeafe;
  --ohda-color-blue-500: #3b82f6;
  --ohda-color-blue-600: #2563eb;
  --ohda-color-blue-700: #1d4ed8;
  --ohda-color-brand-700: #1a45a0;
  --ohda-color-brand-800: #163b87;
  --ohda-color-brand-900: #102a63;
  --ohda-color-yellow-300: #fdec6e;
  --ohda-color-yellow-400: #fbbf24;
  --ohda-color-red-500: #ef4444;
  --ohda-color-green-500: #22c55e;
  --ohda-color-amber-500: #f59e0b;
  --ohda-color-violet-500: #8b5cf6;
  --ohda-color-cyan-500: #0ea5e9;
  --ohda-color-emerald-500: #10b981;
  --ohda-color-pink-500: #ec4899;

  /* Semantic colors */
  --ohda-color-page: var(--ohda-color-slate-50);
  --ohda-color-surface: var(--ohda-color-white);
  --ohda-color-surface-subtle: var(--ohda-color-slate-100);
  --ohda-color-surface-inverse: var(--ohda-color-slate-900);
  --ohda-color-text: var(--ohda-color-slate-900);
  --ohda-color-text-body: var(--ohda-color-slate-700);
  --ohda-color-text-muted: var(--ohda-color-slate-500);
  --ohda-color-text-inverse: var(--ohda-color-slate-50);
  --ohda-color-border: var(--ohda-color-slate-200);
  --ohda-color-border-strong: var(--ohda-color-slate-300);
  --ohda-color-interactive: var(--ohda-color-blue-500);
  --ohda-color-interactive-hover: var(--ohda-color-blue-600);
  --ohda-color-interactive-active: var(--ohda-color-blue-700);
  --ohda-color-focus: var(--ohda-color-blue-500);
  --ohda-color-success: var(--ohda-color-green-500);
  --ohda-color-warning: var(--ohda-color-amber-500);
  --ohda-color-danger: var(--ohda-color-red-500);
  --ohda-color-brand: var(--ohda-color-brand-700);
  --ohda-color-brand-dark: var(--ohda-color-brand-900);
  --ohda-color-accent: var(--ohda-color-yellow-400);

  /* Mathematical semantic colors — preserve meaning before decoration */
  --ohda-color-math-primary: var(--ohda-color-blue-600);
  --ohda-color-math-secondary: var(--ohda-color-violet-500);
  --ohda-color-math-positive: var(--ohda-color-emerald-500);
  --ohda-color-math-warning: var(--ohda-color-amber-500);
  --ohda-color-math-negative: var(--ohda-color-red-500);
  --ohda-color-math-axis: var(--ohda-color-slate-700);
  --ohda-color-math-grid: var(--ohda-color-slate-200);

  /* Typography */
  --ohda-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans TC", sans-serif;
  --ohda-font-family-serif: Georgia, "Times New Roman", "Noto Serif TC", serif;
  --ohda-font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --ohda-font-size-xs: 0.75rem;
  --ohda-font-size-sm: 0.875rem;
  --ohda-font-size-md: 1rem;
  --ohda-font-size-lg: 1.125rem;
  --ohda-font-size-xl: 1.25rem;
  --ohda-font-size-2xl: 1.5rem;
  --ohda-font-size-3xl: 1.875rem;
  --ohda-font-size-4xl: 2.25rem;
  --ohda-font-weight-regular: 400;
  --ohda-font-weight-medium: 500;
  --ohda-font-weight-semibold: 600;
  --ohda-font-weight-bold: 700;
  --ohda-font-weight-extrabold: 800;
  --ohda-line-height-tight: 1.2;
  --ohda-line-height-heading: 1.35;
  --ohda-line-height-body: 1.65;
  --ohda-letter-spacing-tight: -0.02em;
  --ohda-letter-spacing-normal: 0;
  --ohda-letter-spacing-wide: 0.04em;

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

  /* Radius */
  --ohda-radius-none: 0;
  --ohda-radius-sm: 0.375rem;
  --ohda-radius-md: 0.5rem;
  --ohda-radius-lg: 0.75rem;
  --ohda-radius-xl: 1rem;
  --ohda-radius-2xl: 1.125rem;
  --ohda-radius-pill: 9999px;
  --ohda-radius-circle: 50%;

  /* Shadows */
  --ohda-shadow-none: none;
  --ohda-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.05);
  --ohda-shadow-card: 0 4px 6px -1px rgb(15 23 42 / 0.05), 0 2px 4px -2px rgb(15 23 42 / 0.04);
  --ohda-shadow-raised: 0 10px 15px -3px rgb(15 23 42 / 0.10), 0 4px 6px -4px rgb(15 23 42 / 0.08);
  --ohda-shadow-floating: 0 20px 25px -5px rgb(15 23 42 / 0.12), 0 8px 10px -6px rgb(15 23 42 / 0.08);
  --ohda-shadow-inset-divider: inset 0 1px 0 rgb(255 255 255 / 0.08);

  /* Layout */
  --ohda-layout-content-sm: 40rem;
  --ohda-layout-content-md: 52rem;
  --ohda-layout-content-lg: 72rem;
  --ohda-layout-content-xl: 81.25rem;
  --ohda-layout-gutter-mobile: var(--ohda-space-4);
  --ohda-layout-gutter-tablet: var(--ohda-space-6);
  --ohda-layout-gutter-desktop: var(--ohda-space-8);
  --ohda-layout-header-height: 3.5rem;
  --ohda-layout-touch-target: 2.75rem;
  --ohda-breakpoint-sm: 30rem;
  --ohda-breakpoint-md: 48rem;
  --ohda-breakpoint-lg: 64rem;
  --ohda-breakpoint-xl: 80rem;
  --ohda-safe-area-top: env(safe-area-inset-top, 0px);
  --ohda-safe-area-right: env(safe-area-inset-right, 0px);
  --ohda-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --ohda-safe-area-left: env(safe-area-inset-left, 0px);

  /* Z-index */
  --ohda-z-base: 0;
  --ohda-z-content: 10;
  --ohda-z-sticky: 100;
  --ohda-z-dropdown: 300;
  --ohda-z-overlay: 800;
  --ohda-z-modal: 900;
  --ohda-z-toast: 1000;
  --ohda-z-critical: 2000;

  /* Motion and focus */
  --ohda-motion-duration-instant: 0ms;
  --ohda-motion-duration-fast: 120ms;
  --ohda-motion-duration-normal: 200ms;
  --ohda-motion-duration-slow: 320ms;
  --ohda-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ohda-motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --ohda-motion-distance-sm: 0.25rem;
  --ohda-motion-distance-md: 0.75rem;
  --ohda-focus-ring-width: 3px;
  --ohda-focus-ring-offset: 2px;
  --ohda-focus-ring: 0 0 0 var(--ohda-focus-ring-offset) var(--ohda-color-surface), 0 0 0 calc(var(--ohda-focus-ring-offset) + var(--ohda-focus-ring-width)) var(--ohda-color-focus);

  /* Legacy compatibility aliases — migration bridge, not the final API */
  --primary-dark: var(--ohda-color-brand-dark);
  --primary-blue: var(--ohda-color-interactive);
  --primary-blue-dark: var(--ohda-color-interactive-hover);
  --primary-light: var(--ohda-color-blue-50);
  --accent-yellow: var(--ohda-color-accent);
  --ohda-yellow: var(--ohda-color-yellow-300);
  --ohda-red: var(--ohda-color-danger);
  --text-main: var(--ohda-color-text);
  --text-body: var(--ohda-color-text-body);
  --text-light: var(--ohda-color-text-inverse);
  --card-bg: var(--ohda-color-surface);
  --bg-color: var(--ohda-color-page);
  --page-bg: var(--ohda-color-page);
  --bg-page: var(--ohda-color-page);
  --header-bg: var(--ohda-color-brand);
  --header-text: var(--ohda-color-text-inverse);
  --canvas-bg: linear-gradient(135deg, var(--ohda-color-slate-800) 0%, var(--ohda-color-slate-900) 100%);
  --font-main: var(--ohda-font-family-sans);
  --card-radius: var(--ohda-radius-lg);
  --nav-height: var(--ohda-layout-header-height);
  --safe-area-bottom: env(safe-area-inset-bottom, 20px);
  --shadow-card: var(--ohda-shadow-card);
  --shadow-hover: var(--ohda-shadow-floating);
  --shadow-float: var(--ohda-shadow-floating);
  --transition: all var(--ohda-motion-duration-normal) var(--ohda-motion-ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ohda-motion-duration-fast: 0.01ms;
    --ohda-motion-duration-normal: 0.01ms;
    --ohda-motion-duration-slow: 0.01ms;
    --ohda-motion-distance-sm: 0;
    --ohda-motion-distance-md: 0;
  }
}