/* ============================================================================
   DESIGN TOKENS — Easy License Manager for WooCommerce
   ----------------------------------------------------------------------------
   Single source of truth for colour, type, spacing, radius, shadow, motion.
   Light theme = marketing pages. Dark theme = developer / API reference.
   Code blocks are ALWAYS dark (see components.css .code), on both themes.
   All colour pairs below meet WCAG AA for their intended use.
   ============================================================================ */

:root {
  /* ---- Brand fonts --------------------------------------------------------- */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- Type scale (1rem = 16px, ratio ~1.2 with fluid display sizes) ------- */
  --fs-mono-xs: 0.75rem;     /* 12px — code captions, labels */
  --fs-xs: 0.8125rem;        /* 13px — meta, eyebrows */
  --fs-sm: 0.875rem;         /* 14px — secondary text, table cells */
  --fs-base: 1rem;           /* 16px — body */
  --fs-md: 1.125rem;         /* 18px — lead body */
  --fs-lg: 1.25rem;          /* 20px */
  --fs-xl: 1.5rem;           /* 24px — h3 */
  --fs-2xl: 1.875rem;        /* 30px — h2 */
  --fs-3xl: clamp(2rem, 1.4rem + 2.6vw, 2.75rem);   /* h1 section */
  --fs-4xl: clamp(2.5rem, 1.6rem + 4vw, 4rem);      /* hero */
  --fs-5xl: clamp(3rem, 1.8rem + 5.4vw, 5rem);      /* display */

  --lh-tight: 1.05;
  --lh-snug: 1.18;
  --lh-heading: 1.25;
  --lh-body: 1.6;
  --lh-relaxed: 1.72;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.011em;
  --tracking-normal: 0em;
  --tracking-wide: 0.02em;
  --tracking-eyebrow: 0.08em;

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

  /* ---- Spacing scale (8px base) ------------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

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

  /* ---- Layout -------------------------------------------------------------- */
  --container: 1200px;
  --container-wide: 1320px;
  --container-narrow: 720px;
  --container-prose: 680px;
  --gutter: clamp(20px, 5vw, 48px);
  --nav-h: 64px;

  /* ---- Motion -------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 320ms;

  /* ===========================================================================
     LIGHT THEME — marketing (default)
     =========================================================================== */
  --paper: #fcfcfb;          /* page background */
  --surface: #ffffff;        /* cards, raised */
  --surface-2: #f5f6f3;      /* sunken panels, code-on-light wells */
  --surface-3: #eceeea;      /* deeper fills, hover rows */
  --ink: #0e1116;            /* primary text / near-black */
  --ink-2: #41474f;          /* body secondary */
  --ink-3: #686e77;          /* muted / captions  (AA on paper) */
  --ink-4: #9298a0;          /* faint, decorative only */
  --line: #e6e8e3;           /* hairline borders */
  --line-2: #d4d7d0;         /* stronger borders, inputs */
  --line-3: #c2c6bd;         /* active/hover borders */

  --accent: #4b54d6;         /* indigo — primary action */
  --accent-hover: #3b43be;
  --accent-press: #2f37a0;
  --accent-wash: #eef0fb;    /* tint background */
  --accent-wash-2: #e0e3f7;
  --accent-border: #c7ccf2;
  --accent-text: #3730a3;    /* indigo text on light (AA on paper) */

  --success: #1f7a52;
  --success-wash: #e6f3ec;
  --success-border: #b6dcc6;
  --warn: #9a5b08;
  --warn-wash: #fbefdc;
  --warn-border: #ecd2a3;
  --danger: #be342b;
  --danger-wash: #fbe9e7;
  --danger-border: #efc2bd;

  --focus-ring: 0 0 0 3px rgba(75, 84, 214, 0.32);
  --focus-color: #4b54d6;

  --shadow-xs: 0 1px 2px rgba(14, 17, 22, 0.05);
  --shadow-sm: 0 1px 3px rgba(14, 17, 22, 0.07), 0 1px 2px rgba(14, 17, 22, 0.04);
  --shadow-md: 0 6px 16px rgba(14, 17, 22, 0.08), 0 1px 3px rgba(14, 17, 22, 0.05);
  --shadow-lg: 0 16px 40px rgba(14, 17, 22, 0.11), 0 4px 10px rgba(14, 17, 22, 0.05);
  --shadow-xl: 0 28px 68px rgba(14, 17, 22, 0.14), 0 8px 18px rgba(14, 17, 22, 0.06);

  /* surface used for inline page code wells on light pages */
  --code-inline-bg: #f1f2ee;
  --code-inline-ink: #2f37a0;

  color-scheme: light;
}

/* ===========================================================================
   DARK THEME — developer / API reference  (apply data-theme="dark")
   =========================================================================== */
[data-theme="dark"] {
  --paper: #0b0e13;
  --surface: #11151c;
  --surface-2: #161b23;
  --surface-3: #1c222c;
  --ink: #e8ebf0;
  --ink-2: #b3bbc7;
  --ink-3: #8a93a0;
  --ink-4: #69727f;
  --line: #222a35;
  --line-2: #2c3540;
  --line-3: #3a4450;

  --accent: #8b93ff;
  --accent-hover: #a3a9ff;
  --accent-press: #757df0;
  --accent-wash: #181d33;
  --accent-wash-2: #20264a;
  --accent-border: #343c66;
  --accent-text: #aab1ff;

  --success: #4cc28a;
  --success-wash: #11241b;
  --success-border: #244736;
  --warn: #e3a44f;
  --warn-wash: #2a2113;
  --warn-border: #4a3c1f;
  --danger: #f0817a;
  --danger-wash: #2a1716;
  --danger-border: #4d2a27;

  --focus-ring: 0 0 0 3px rgba(139, 147, 255, 0.4);
  --focus-color: #8b93ff;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.6), 0 6px 14px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 32px 72px rgba(0, 0, 0, 0.66), 0 10px 22px rgba(0, 0, 0, 0.5);

  --code-inline-bg: #1a212c;
  --code-inline-ink: #aab1ff;

  color-scheme: dark;
}

/* ===========================================================================
   CODE SYNTAX TOKENS — used by the always-dark .code component everywhere
   =========================================================================== */
:root {
  --code-bg: #0c1017;
  --code-bg-header: #11161f;
  --code-line: #1f2630;
  --code-fg: #d7dce4;
  --code-gutter: #4a5462;
  --code-comment: #6b7686;
  --code-kw: #c4a2ff;        /* keywords, php tags */
  --code-fn: #82b2ff;        /* function / method names */
  --code-str: #93d98a;       /* strings */
  --code-num: #f0a878;       /* numbers, constants */
  --code-var: #e6c07b;       /* variables $foo */
  --code-tag: #f08a8a;       /* html/xml tags, operators */
  --code-attr: #82b2ff;
  --code-punc: #9aa3b0;
  --code-prop: #7fd1c4;      /* json keys, properties */
  --code-add: #93d98a;
  --code-del: #f08a8a;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}