/* ============================================================
   MollySIM Design Tokens — single source of truth
   ============================================================
   Namespace: --ms-*
   Loaded before styles.css (via @import at the top of styles.css),
   so every page that links styles.css gets these for free.

   Rules:
   - New UI code must reference these tokens, never raw hex values.
   - Legacy variables (--brand, --ink, --radius-*, --shadow-*) in
     styles.css are aliased to these tokens during migration.
   - Dark mode: override tokens inside [data-theme="dark"] below.
     Only token values change; component CSS never branches on theme.
   ============================================================ */

:root {
  /* ---------- Color: brand ---------- */
  --ms-color-primary: #00b490;
  --ms-color-primary-hover: #009f80;
  --ms-color-primary-pressed: #008f71;
  --ms-color-primary-bright: #00d1a7;    /* gradient endpoint with primary */
  --ms-color-primary-soft: #d9f4ee;      /* tinted backgrounds, selected states */
  --ms-color-primary-soft-hover: #c8eee5;
  --ms-color-on-primary: #ffffff;
  --ms-color-secondary: #1a4338;         /* deep green — headers, footer, emphasis */
  --ms-color-accent: #ffba8c;            /* warm peach — sparing use only */

  /* ---------- Color: surfaces ---------- */
  --ms-color-bg: #fffcfa;                /* page background */
  --ms-color-surface: #ffffff;           /* cards, panels */
  --ms-color-surface-elevated: #ffffff;  /* dialogs, dropdowns, sheets */
  --ms-color-surface-sunken: #f6f8f5;    /* wells, table headers, input backdrops */
  --ms-color-border: #e5e8e1;
  --ms-color-border-strong: #ceded5;
  --ms-color-divider: #eef0ea;

  /* ---------- Color: text ---------- */
  --ms-color-text-primary: #29252c;
  --ms-color-text-secondary: #6a6f68;
  --ms-color-text-tertiary: #8b9089;
  --ms-color-text-inverse: #ffffff;
  --ms-color-text-link: var(--ms-color-primary-pressed);

  /* ---------- Color: status ---------- */
  --ms-color-success: #0e9f6e;
  --ms-color-success-soft: #e6f7f0;
  --ms-color-warning: #d97706;
  --ms-color-warning-soft: #fdf3e3;
  --ms-color-error: #dc2626;
  --ms-color-error-soft: #fdeaea;
  --ms-color-info: #2563eb;
  --ms-color-info-soft: #e9f0fd;

  /* ---------- Typography ---------- */
  --ms-font-sans: 'Poppins', 'Manrope', 'PingFang SC', 'Hiragino Sans GB',
    'Noto Sans SC', 'Microsoft YaHei', sans-serif;

  --ms-text-display: clamp(34px, 5vw, 48px);
  --ms-text-h1: clamp(28px, 4vw, 36px);
  --ms-text-h2: clamp(22px, 3vw, 28px);
  --ms-text-h3: 20px;
  --ms-text-h4: 17px;
  --ms-text-body-lg: 17px;
  --ms-text-body: 15px;
  --ms-text-body-sm: 13.5px;
  --ms-text-caption: 12px;
  --ms-text-label: 12px;

  --ms-weight-regular: 400;
  --ms-weight-medium: 500;
  --ms-weight-semibold: 600;
  --ms-weight-bold: 700;
  --ms-weight-extrabold: 800;

  --ms-leading-tight: 1.2;   /* display, headings */
  --ms-leading-snug: 1.35;   /* card titles, labels */
  --ms-leading-normal: 1.55; /* body copy */

  /* ---------- Spacing (4px base scale) ---------- */
  --ms-space-1: 4px;
  --ms-space-2: 8px;
  --ms-space-3: 12px;
  --ms-space-4: 16px;
  --ms-space-5: 20px;
  --ms-space-6: 24px;
  --ms-space-8: 32px;
  --ms-space-10: 40px;
  --ms-space-12: 48px;
  --ms-space-16: 64px;

  /* ---------- Border radius ---------- */
  --ms-radius-xs: 6px;    /* tags, badges, small chips */
  --ms-radius-sm: 10px;   /* inputs, small buttons */
  --ms-radius-md: 14px;   /* buttons, list rows */
  --ms-radius-lg: 20px;   /* cards */
  --ms-radius-xl: 24px;   /* large cards, sections, sheets */
  --ms-radius-2xl: 28px;  /* hero panels, dialogs */
  --ms-radius-full: 999px;

  /* ---------- Shadows / elevation ---------- */
  --ms-shadow-xs: 0 1px 2px rgba(16, 24, 18, 0.05);
  --ms-shadow-sm: 0 4px 10px rgba(16, 24, 18, 0.1);   /* legacy --shadow-card */
  --ms-shadow-md: 0 8px 24px rgba(16, 24, 18, 0.08);  /* legacy --shadow-soft */
  --ms-shadow-lg: 0 16px 40px rgba(16, 24, 18, 0.14); /* dialogs, dropdowns */
  --ms-focus-ring: 0 0 0 3px rgba(0, 180, 144, 0.28);

  /* ---------- Motion ---------- */
  --ms-duration-fast: 120ms;    /* hover, press feedback */
  --ms-duration-base: 180ms;    /* tabs, accordions, toggles */
  --ms-duration-slow: 280ms;    /* sheets, dialogs, page elements */
  --ms-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ms-ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ---------- Breakpoints (reference values; use in media queries) ----------
     --ms-bp-mobile:  480px
     --ms-bp-tablet:  768px
     --ms-bp-laptop:  1024px
     --ms-bp-desktop: 1240px
     --ms-bp-wide:    1440px
     (CSS custom properties cannot be used inside media queries; keep these
     values in sync manually and do not invent new breakpoints per page.) */
}

/* ============================================================
   Dark mode scaffold — NOT active yet.
   When dark mode ships, set data-theme="dark" on <html> and
   fill in the overrides below. Component CSS needs no changes.
   ============================================================ */
[data-theme='dark'] {
  /* --ms-color-bg: #121614;
     --ms-color-surface: #1b201d;
     --ms-color-text-primary: #f2f4f0;
     ... */
}

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