/* ==========================================================================
   00-tokens.css
   Design tokens – single source of truth
   - No preprocess
   - One :root only
   - Light is default; Dark via [data-theme="dark"] or .theme-dark
   ========================================================================== */

:root {
  /* -----------------------------------------------------------------------
     Typography
     ----------------------------------------------------------------------- */
  --font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji",
  "Segoe UI Emoji";
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
  monospace;

  /* Font sizes (rem; respects user zoom) */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-md: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.375rem;  /* 22px */
  --font-size-xxl: 1.75rem;  /* 28px */

  /* Headings (clamp = responsive without breakpoints) */
  --h1-size: clamp(1.5rem, 2.2vw, 1.9rem);
  --h2-size: clamp(1.25rem, 1.6vw, 1.45rem);
  --h3-size: clamp(1.125rem, 1.2vw, 1.25rem);

  /* Line height */
  --line-height-tight: 1.2;
  --line-height-normal: 1.45;
  --line-height-loose: 1.7;

  /* -----------------------------------------------------------------------
     Spacing (rem-based scale)
     ----------------------------------------------------------------------- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-7: 2rem;     /* 32px */
  --space-8: 2.5rem;   /* 40px */

  /* -----------------------------------------------------------------------
     Radius & Shadows
     ----------------------------------------------------------------------- */
  --radius-sm: 0.5rem;   /* 8px */
  --radius-md: 0.625rem; /* 10px */
  --radius-lg: 0.75rem;  /* 12px */
  --radius-xl: 1rem;     /* 16px */

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.22);

  /* -----------------------------------------------------------------------
     Layout tokens (responsive)
     ----------------------------------------------------------------------- */
  --sidebar-w: clamp(3.5rem, 4vw, 4.5rem); /* ~56–72px */
  --header-h: 64px;
  --drawer-w: clamp(16rem, 24vw, 20rem);  /* ~256–320px */
  --page-pad: clamp(1rem, 2.2vw, 2rem);   /* 16–32px */

  /* -----------------------------------------------------------------------
     Z-index layers
     ----------------------------------------------------------------------- */
  --z-menu: 1000;
  --z-toast: 1100;
  --z-modal: 1200;

  /* -----------------------------------------------------------------------
     Color – Neutrals (Light default)
     ----------------------------------------------------------------------- */
  --color-bg-app: #f6f7f9;       /* app background */
  --color-bg-surface: #ffffff;   /* cards/panels */
  --color-bg-muted: #eef1f4;     /* subtle blocks */
  --color-bg-muted-hover: #e6eaee;

  /* Surface levels (alias neutrals into semantic layers) */
  --color-surface-1: var(--color-bg-surface); /* default surface (cards/panels) */
  --color-surface-2: var(--color-bg-muted);   /* subtle surface (toolbars/stripes) */
  --color-surface-3: #e7ebf0;                 /* slightly stronger surface */

  --color-border-subtle: #e2e6ea;
  --color-border-strong: #cfd6dd;

  --color-text-primary: #1f2933;
  --color-text-secondary: #4b5563;
  --color-text-muted: #6b7280;
  --color-text-inverse: #ffffff;

  /* -----------------------------------------------------------------------
     Color – Brand / Accent
     ----------------------------------------------------------------------- */
  --color-primary: #2f6fed;
  --color-primary-hover: #255ed1;
  --color-primary-text: #ffffff; /* text on primary */

  /* Focus ring */
  --color-focus: rgba(47, 111, 237, 0.35);

  /* -----------------------------------------------------------------------
     Color – Semantic
     ----------------------------------------------------------------------- */
  --color-success: #22c55e;
  --color-success-bg: #eafbeeff;
  --color-success-border: #bff2cf;

  --color-warning: #f59e0b;
  --color-warning-bg: #fff7e6;
  --color-warning-border: #ffe0a3;

  --color-danger: #ef4444;
  --color-danger-bg: #ffebeb;
  --color-danger-border: #ffbcbc;

  --color-info: #0ea5e9;
  --color-info-bg: #e8f7ff;
  --color-info-border: #b7e8ff;

  /* -----------------------------------------------------------------------
     Compatibility aliases (keep while we clean 20-components.css)
     ----------------------------------------------------------------------- */
  --color-on-primary: var(--color-primary-text);
  --color-primary-contrast: var(--color-primary-text);

  --color-bg: var(--color-bg-app);
  --color-surface: var(--color-bg-surface);
  --color-text: var(--color-text-primary);
  --color-border: var(--color-border-subtle);

  --radius-2: var(--radius-md);
}

/* ==========================================================================
   Dark theme override
   Activate by setting: <html data-theme="dark"> or <body class="theme-dark">
   ========================================================================== */

:root[data-theme="dark"],
.theme-dark {
  --color-bg-app: #0f1720;
  --color-bg-surface: #121c27;
  --color-bg-muted: #162231;
  --color-bg-muted-hover: #1b2a3b;

  /* Surface levels */
  --color-surface-1: var(--color-bg-surface);
  --color-surface-2: var(--color-bg-muted);
  --color-surface-3: #1d2a3a;

  /* Elevation (shadows need to be stronger/cleaner in dark UI) */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.65);

  --color-border-subtle: rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  --color-text-primary: #e6edf5;
  --color-text-secondary: #b9c3cf;
  --color-text-muted: #97a5b5;
  --color-text-inverse: #0b1220;

  --color-primary: #6ea6ff;
  --color-primary-hover: #5a95f2;
  --color-primary-text: #0b1220;

  --color-focus: rgba(110, 166, 255, 0.35);

  /* Semantic in dark: keep hue, adjust backgrounds */
  --color-success-bg: rgba(34, 197, 94, 0.14);
  --color-success-border: rgba(34, 197, 94, 0.30);

  --color-warning-bg: rgba(245, 158, 11, 0.14);
  --color-warning-border: rgba(245, 158, 11, 0.30);

  --color-danger-bg: rgba(239, 68, 68, 0.14);
  --color-danger-border: rgba(239, 68, 68, 0.30);

  --color-info-bg: rgba(14, 165, 233, 0.14);
  --color-info-border: rgba(14, 165, 233, 0.30);
}