/*
 * GetXtra Tools 2.0 — design tokens.
 * Light theme on :root, dark theme on [data-theme="dark"] (set before first paint by the inline theme script).
 * The brand colour comes from Admin → Settings and is injected as --brand* variables in the layout <head>.
 */

/*
 * Inter in two files: Latin + Latin-1 + punctuation + common symbols (InterVariable-latin.woff2, preloaded, ~140 KB)
 * and the full font for every other character (Cyrillic, Greek, Vietnamese, more symbols), which browsers download only
 * when a page contains one. Built with php bin/subset-font.php (see assets/fonts/inter/SOURCE.txt); keep the two
 * unicode-range lists complementary.
 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/InterVariable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20A0-20C0, U+2116, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/InterVariable.woff2") format("woff2");
  unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-1FFF, U+2070-209F, U+20C1-2115, U+2117-2121, U+2123-218F, U+219A-2211, U+2213-2214, U+2216-2247, U+2249-225F, U+2261-2263, U+2266-FEFE, U+FF00-FFFC, U+FFFE-10FFFF;
}

/* Metric-matched fallback so the swap to Inter causes no layout shift. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  ascent-override: 96.875%;
  descent-override: 24.148%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

:root {
  color-scheme: light;

  /* Brand (defaults; overridden from settings) */
  --brand: #4f46e5;
  --brand-fg: #ffffff;
  --brand-hover: #4338ca;
  --brand-text: #4338ca;
  --brand-soft: #eef0fe;
  --brand-ring: rgb(79 70 229 / 0.35);

  /* Neutrals */
  --bg: #ffffff;
  --bg-subtle: #f8f9fb;
  --bg-muted: #f1f3f7;
  --bg-inverse: #0f1729;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-overlay: rgb(255 255 255 / 0.82);
  --border: #e5e8ee;
  --border-strong: #d2d7e0;
  --text: #0f1729;
  --text-muted: #475167;
  --text-subtle: #5f6b80;
  --text-inverse: #ffffff;
  --backdrop: rgb(15 23 41 / 0.45);

  /* Semantic */
  --success: #0f7b55;
  --success-soft: #e7f6ef;
  --warning: #a35400;
  --warning-soft: #fdf3e3;
  --danger: #c8261b;
  --danger-soft: #fdecea;
  --info: var(--brand-text);
  --info-soft: var(--brand-soft);

  /* Category accents (icon tiles, chips) */
  --cat-pdf: #e5484d;
  --cat-pdf-soft: #feeceb;
  --cat-image: #3e63dd;
  --cat-image-soft: #ebf0fe;
  --cat-ai: #c4368f;
  --cat-ai-soft: #fcecf6;
  --cat-other: #0d8f7f;
  --cat-other-soft: #e3f6f3;

  /* Typography */
  --font-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.625rem, 1.2rem + 1.4vw, 1.875rem);
  --text-4xl: clamp(1.875rem, 1.3rem + 2.2vw, 2.5rem);
  --text-5xl: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.035em;

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

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgb(16 24 40 / 0.05);
  --shadow-sm: 0 1px 3px rgb(16 24 40 / 0.08), 0 1px 2px rgb(16 24 40 / 0.04);
  --shadow-md: 0 6px 16px -4px rgb(16 24 40 / 0.1), 0 2px 4px -2px rgb(16 24 40 / 0.05);
  --shadow-lg: 0 20px 44px -12px rgb(16 24 40 / 0.18), 0 6px 12px -6px rgb(16 24 40 / 0.07);
  --shadow-xl: 0 32px 64px -16px rgb(16 24 40 / 0.25);

  /* Focus */
  --ring: 0 0 0 3px var(--brand-ring);
  --ring-offset: 0 0 0 2px var(--bg);

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --header-h: 64px;
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 320ms;

  --z-header: 40;
  --z-dropdown: 50;
  --z-drawer: 60;
  --z-modal: 70;
  --z-toast: 80;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0a0c11;
  --bg-subtle: #0f1218;
  --bg-muted: #161a22;
  --bg-inverse: #f3f4f7;
  --surface: #11141b;
  --surface-raised: #171b24;
  --surface-overlay: rgb(17 20 27 / 0.82);
  --border: #232833;
  --border-strong: #323949;
  --text: #eef0f5;
  --text-muted: #b3bac7;
  --text-subtle: #939cad;
  --text-inverse: #0a0c11;
  --backdrop: rgb(0 0 0 / 0.6);

  --success: #3ccf91;
  --success-soft: rgb(60 207 145 / 0.12);
  --warning: #f5b049;
  --warning-soft: rgb(245 176 73 / 0.12);
  --danger: #ff8a80;
  --danger-soft: rgb(255 107 97 / 0.13);

  --cat-pdf: #ff6b6f;
  --cat-pdf-soft: rgb(255 107 111 / 0.13);
  --cat-image: #7b96ff;
  --cat-image-soft: rgb(123 150 255 / 0.14);
  --cat-ai: #f07cc4;
  --cat-ai-soft: rgb(240 124 196 / 0.13);
  --cat-other: #3fd1bd;
  --cat-other-soft: rgb(63 209 189 / 0.12);

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.02);
  --shadow-md: 0 8px 20px -6px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.03);
  --shadow-lg: 0 24px 48px -12px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.04);
  --shadow-xl: 0 32px 64px -16px rgb(0 0 0 / 0.8);
}

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