/* =====================================================================
   tokens.css — CosmeticsBridge AI Design System Tokens
   Source of truth: /Users/rogerying/CosmeticsBridge-DESIGN.md
   Consumed by main.css and all prototype HTML pages. Do NOT hardcode
   non-locked colors anywhere; every value below is derived from the
   locked brand palette (navy / teal / amber / slate).
   ===================================================================== */

:root {
  /* ===== Color · Primary (navy, locked) ===== */
  --color-primary: #1E3A8A;
  --color-primary-700: #152C66;
  --color-primary-600: #2A4BA8;
  --color-primary-50: #EEF2FB;

  /* ===== Color · Secondary (teal, locked) ===== */
  --color-secondary: #0D9488;
  --color-secondary-700: #0F766E;
  --color-secondary-50: #E6F4F2;

  /* ===== Color · Accent (amber, locked) ===== */
  --color-accent: #F59E0B;
  --color-accent-700: #B45309;
  --color-accent-600: #D97706;
  --color-accent-100: #FEF3C7;

  /* ===== Color · Neutral (slate) ===== */
  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0;
  --color-border: #E2E8F0;
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;   /* locked Neutral */
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B;
  --color-neutral-900: #0F172A;

  /* ===== Color · Semantic ===== */
  --color-success: #15803D;
  --color-warning: #B45309;
  --color-danger: #DC2626;
  --color-link: #1E3A8A;
  --color-link-hover: #152C66;

  /* ===== Typography ===== */
  --font-title: 'Montserrat', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body:  'Inter', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-cn:    'Noto Sans SC', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* Font sizes (Chinese line-height widened) */
  --fs-xs: 0.75rem;   /* 12px */
  --fs-sm: 0.875rem;  /* 14px */
  --fs-base: 1rem;    /* 16px */
  --fs-lg: 1.125rem;  /* 18px */
  --fs-xl: 1.25rem;   /* 20px */
  --fs-2xl: 1.5rem;   /* 24px */
  --fs-3xl: 2rem;     /* 32px */
  --fs-4xl: 2.5rem;   /* 40px */

  /* ===== Spacing scale ===== */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* ===== Radius / Border ===== */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 9999px;
  --border-w: 1px; --border-w-strong: 1.5px;

  /* ===== Shadow / Focus (slate near-black, no colored glow) ===== */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md: 0 2px 4px rgba(15,23,42,.04), 0 6px 16px rgba(15,23,42,.06);
  --shadow-lg: 0 8px 24px rgba(15,23,42,.08);
  --shadow-focus: 0 0 0 3px rgba(30,58,138,.25);

  /* ===== Layout / Z-index ===== */
  --container-max: 1200px;
  --z-base: 0; --z-sticky: 200; --z-dropdown: 300; --z-modal: 400; --z-toast: 500;

  /* ===== Breakpoints (reference for media queries) ===== */
  /* Mobile 375 (<=767) | Tablet 768-1023 | Desktop 1024-1279 | Large >=1280 */
}