/* ==========================================================================
   M-Convert — Design Tokens
   Single source of truth for colors, spacing, typography, shadows, radii,
   motion, and z-index scale. Nothing here depends on anything else.
   ========================================================================== */

:root {
  /* ---------- Brand Colors ---------- */
  --color-primary:        #2563EB;
  --color-primary-hover:  #1D4ED8;
  --color-primary-active: #1E40AF;
  --color-primary-soft:   #EFF6FF;
  --color-primary-ring:   rgba(37, 99, 235, 0.35);

  --color-navy:           #0F172A;

  /* ---------- Neutrals ---------- */
  --color-bg:             #FFFFFF;
  --color-bg-subtle:      #F8FAFC;
  --color-bg-muted:       #F1F5F9;
  --color-bg-inverse:     #0F172A;

  --color-border:         #E2E8F0;
  --color-border-strong:  #CBD5E1;

  --color-text:           #1E293B;
  --color-text-secondary: #64748B;
  --color-text-muted:     #94A3B8;
  --color-text-inverse:   #F8FAFC;

  /* ---------- Semantic ---------- */
  --color-success:        #15803D;
  --color-success-soft:   #DCFCE7;
  --color-error:          #DC2626;
  --color-error-soft:     #FEE2E2;
  --color-warning:        #B45309;
  --color-warning-soft:   #FEF3C7;
  --color-info:           #0369A1;
  --color-info-soft:      #E0F2FE;

  /* ---------- Typography ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --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:   1.875rem;  /* 30px */
  --fs-4xl:   2.25rem;   /* 36px */
  --fs-5xl:   3rem;      /* 48px */

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide:  0.02em;

  /* ---------- Spacing (4px base) ---------- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 12px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-focus: 0 0 0 3px var(--color-primary-ring);

  /* ---------- Transitions ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  180ms;
  --dur-slow:  300ms;

  /* ---------- Z-index scale ---------- */
  --z-base:       1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-pad: 1rem;
  --header-h: 64px;

  /* ---------- Component-specific ---------- */
  --input-h: 48px;
  --button-h: 44px;
  --card-pad: 1.25rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  :root {
    --container-pad: 1.5rem;
    --header-h: 72px;
    --card-pad: 1.5rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  :root {
    --container-pad: 2rem;
  }
}

/* Dark mode — opt-in via [data-theme="dark"] on <html> */
[data-theme="dark"] {
  --color-bg:             #0F172A;
  --color-bg-subtle:      #111C33;
  --color-bg-muted:       #1E293B;
  --color-bg-inverse:     #F8FAFC;

  --color-border:         #1E293B;
  --color-border-strong:  #334155;

  --color-text:           #F1F5F9;
  --color-text-secondary: #94A3B8;
  --color-text-muted:     #64748B;
  --color-text-inverse:   #0F172A;

  --color-primary-soft:   #1E293B;

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 12px 24px rgba(0, 0, 0, 0.55);
}