/* =========================
   WPPS.ru – STATIC THEME TOKENS
   Webmaster's Privacy & Productivity Suite

   Color tokens for dark/light modes are generated by
   scripts/build-tokens.ts → static/css/theme-generated.css and loaded
   alongside this file. This file owns everything non-color: typography,
   spacing, radii, shadows, z-index, and semantic accent colors that are
   not mode-dependent.
   ========================= */

:root {
  /* Raw brand hex kept as a compile-time reference (the generator reads
     the palette from src/theme/palette.ts, not from CSS). */
  --wpps-indigo: #475aa8;
  --wpps-indigo-light: #5e6fb1;

  /* Semantic accents — independent of dark/light, used for state colors */
  --danger: #FF4F6E;
  --success: #18C27A;
  --warning: #FFB347;
  --info: #3B82F6;

  /* Typography */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;

  --fs-body: 1rem;
  --lh-body: 1.5;

  /* Unified control system */
  --fs-control: clamp(0.94rem, 0.92rem + 0.2vw, 0.98rem);
  --lh-control: 1.25;

  --control-pad-y: 0.35em;
  --control-pad-x: 0.90em;
  --border-1: 1px;
  --control-min-height: calc(
    1em * var(--lh-control) +
    2 * var(--control-pad-y) +
    2 * var(--border-1)
  );

  /* Radius & layout */
  --r-pill: 999px;
  --r-field: 0.75rem;
  --control-radius: var(--r-pill);
  --inline-gap: 0.5rem;
  --stack-gap: 0.75rem;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;

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

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;

  --radius-xs: 0.25rem;
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;

  --shadow-sm-light: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md-light: 0 6px 18px rgba(0, 0, 0, 0.12);
  --shadow-lg-light: 0 18px 45px rgba(0, 0, 0, 0.25);

  --shadow-sm-dark: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md-dark: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg-dark: 0 18px 45px rgba(0, 0, 0, 0.65);

  --border-width: 1px;
  --border-style: solid;

  --transition-fast: 120ms ease-out;
  --transition-md: 160ms ease-out;

  /* Z-index */
  --z-base: 1;
  --z-indicator: 2;
  --z-elevated: 10;
  --z-dropdown: 20;
  --z-sticky: 30;
  --z-header: 200;
  --z-modal: 2000;

  --btn-text-on-dark: #FFFFFF;
  --btn-text-on-bright: #111111;
}

/* Attach mode-independent shadow aliases to both data-theme values.
   The mode-specific color tokens live in theme-generated.css and are
   regenerated via `npm run build:tokens`. */
:root[data-theme="dark"] {
  --shadow-sm: var(--shadow-sm-dark);
  --shadow-md: var(--shadow-md-dark);
  --shadow-lg: var(--shadow-lg-dark);
}

:root[data-theme="light"] {
  --shadow-sm: var(--shadow-sm-light);
  --shadow-md: var(--shadow-md-light);
  --shadow-lg: var(--shadow-lg-light);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img, svg { max-width: 100%; display: block; }