/* ==========================================================================
   variables.css — Design tokens for SixtyTools
   Single source of truth for color, type, space, motion and elevation.
   Every component file must consume these tokens, never raw values.
   ========================================================================== */

:root {
  /* ---- Brand palette -------------------------------------------------- */
  --ink-900: #0d1b2a;
  --ink-800: #14263a;
  --ink-700: #1d3550;
  --slate-500: #5a6b80;
  --slate-400: #7d8ea3;
  --slate-300: #a9b6c6;
  --mist-200: #d9e1ea;
  --mist-100: #eef2f7;
  --paper: #f7f9fc;
  --white: #ffffff;

  --signal-600: #0b6e5f;
  --signal-500: #0f8a76;
  --signal-400: #14a88f;
  --signal-100: #d8f2ec;
  /* Secondary accent — a vivid teal-cyan used sparingly for highlights,
     gradients and interactive sparkle. Keeps the brand teal family but adds
     energy the restrained single-teal palette lacked. */
  --spark-500: #0ea5b7;
  --spark-400: #22c3d6;
  --spark-300: #67e0ee;
  /* Brand gradient — used on the hero focal visual and select accents. */
  --grad-brand: linear-gradient(135deg, #0b6e5f 0%, #0ea5b7 100%);
  --grad-brand-soft: linear-gradient(135deg, #eafaf6 0%, #e6f7fb 100%);

  /* Darkened from the original #b4761a, which scored only 3.31 against
     --amber-100 and so failed AA for body-sized text. */
  --amber-500: #8a5a12;
  --amber-100: #fbeeda;
  --rose-500: #b03a48;
  --rose-100: #fbe3e6;

  /* ---- Semantic surfaces (light is default) --------------------------- */
  --bg-base: var(--paper);
  --bg-surface: var(--white);
  --bg-raised: var(--white);
  --bg-sunken: var(--mist-100);
  --bg-inverse: var(--ink-900);

  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--slate-500);
  --text-onaccent: var(--white);
  --text-oninverse: var(--mist-100);

  --border-subtle: var(--mist-200);
  --border-strong: var(--slate-300);

  --accent: var(--signal-600);
  --accent-hover: var(--signal-500);
  --accent-soft: var(--signal-100);
  --focus-ring: var(--signal-500);

  --warn-fg: var(--amber-500);
  --warn-bg: var(--amber-100);
  --danger-fg: var(--rose-500);
  --danger-bg: var(--rose-100);

  /* ---- Typography ----------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino,
    Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono",
    Menlo, monospace;

  /* Fluid type scale — minor third, clamped for mobile-first */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: clamp(1.0625rem, 0.25vw + 1rem, 1.1875rem);
  --fs-xl: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.2vw + 1.2rem, 2rem);
  --fs-3xl: clamp(1.875rem, 2.4vw + 1.25rem, 2.875rem);
  --fs-4xl: clamp(2.25rem, 4vw + 1.25rem, 4rem);

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-loose: 1.75;

  --tracking-tight: -0.022em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

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

  /* ---- Space scale (4px base) ----------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5.5rem;
  --sp-11: 7rem;

  /* ---- Layout --------------------------------------------------------- */
  --shell-max: 1200px;
  --shell-narrow: 760px;
  --gutter: var(--sp-4);
  --header-h: 64px;

  /* ---- Radius --------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ---- Elevation ------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(13, 27, 42, 0.06);
  --shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.05), 0 2px 6px rgba(13, 27, 42, 0.06);
  --shadow-md: 0 2px 4px rgba(13, 27, 42, 0.04), 0 8px 20px rgba(13, 27, 42, 0.10);
  --shadow-lg: 0 4px 8px rgba(13, 27, 42, 0.05), 0 18px 44px rgba(13, 27, 42, 0.14);
  --shadow-xl: 0 20px 40px rgba(13, 27, 42, 0.12), 0 40px 90px rgba(13, 27, 42, 0.20);
  --shadow-accent: 0 6px 18px rgba(11, 110, 95, 0.22);

  /* ---- Motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 380ms;

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

  /* ---- Ad slot reservations ------------------------------------------ */
  --ad-top-h: 250px;
  --ad-mid-h: 250px;
  --ad-bottom-h: 90px;

  /* ---- Category accents ----------------------------------------------
     One hue per category, used for card icons, badges and hover borders.
     Each has a -fg (text/icon) and -bg (tint) pair so contrast is managed
     centrally rather than guessed per component. */
  --cat-measurements-fg: #0b6e5f;
  --cat-measurements-bg: #d8f2ec;
  --cat-developer-fg: #3a4fa8;
  --cat-developer-bg: #e2e7fb;
  --cat-text-fg: #8a4b13;
  --cat-text-bg: #fbeeda;
  --cat-lifestyle-fg: #9c3a6e;
  --cat-lifestyle-bg: #fbe4f0;
  --cat-engineering-fg: #2b6b8a;
  --cat-engineering-bg: #dceff7;
  --cat-finance-fg: #4a6b1f;
  --cat-finance-bg: #e8f3d8;

  color-scheme: light;
}

/* ==========================================================================
   Dark theme — attribute driven so it can be set before paint by theme.js
   ========================================================================== */
[data-theme="dark"] {
  --bg-base: #0a1420;
  --bg-surface: #101f2f;
  --bg-raised: #16283a;
  --bg-sunken: #0d1a28;
  --bg-inverse: var(--mist-100);

  --text-strong: #f2f6fa;
  --text-body: #cbd7e4;
  --text-muted: #8fa1b5;
  --text-onaccent: #04211c;
  --text-oninverse: var(--ink-900);

  --border-subtle: #1f3448;
  --border-strong: #2f4a63;

  --accent: #45cbb0;
  --accent-hover: #63dcc3;
  --accent-soft: #10352f;
  --focus-ring: #63dcc3;

  --warn-fg: #e0a94f;
  --warn-bg: #33270f;
  --danger-fg: #e8808c;
  --danger-bg: #35171c;

  /* Category accents, lifted for legibility on dark surfaces. */
  --cat-measurements-fg: #45cbb0;
  --cat-measurements-bg: #10352f;
  --cat-developer-fg: #93a5f0;
  --cat-developer-bg: #1b2247;
  --cat-text-fg: #e0a94f;
  --cat-text-bg: #33270f;
  --cat-lifestyle-fg: #e58cba;
  --cat-lifestyle-bg: #3a1a2c;
  --cat-engineering-fg: #7cc2de;
  --cat-engineering-bg: #12303c;
  --cat-finance-fg: #a8c96f;
  --cat-finance-bg: #24310f;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 18px 44px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5), 0 40px 90px rgba(0, 0, 0, 0.7);
  --shadow-accent: 0 6px 18px rgba(69, 203, 176, 0.24);

  color-scheme: dark;
}