/* FXDog design tokens · v5 (type scale + 8px rhythm; colours unchanged from v4)
   previously v4 (original colours from v3; flat surfaces, modest radii, minimal shadow)
   previously v3
   Colours restored from the ORIGINAL site (src/website/assets/site.css :root / body.light,
   product-ui.css accent, header v7 rules); layout tokens from v2.
   Dark is the default (same as the original). Themes swap variables only:
   html[data-theme="light"] (body.light kept as legacy alias). */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  /* surfaces — original site.css :root */
  --bg: #030a25;                /* site.css --bg */
  --bg-alt: #111b45;            /* product-section-soft = --surface2 */
  --bg-deep: #050b2b;           /* site.css --nav (header / footer) */
  --panel: #0c1436;             /* --surface */
  --panel-2: #111b45;           /* --surface2 */
  --panel-3: #091638;           /* --surface3 */
  --border: #263d75;            /* --line */
  --border-strong: #3a5689;     /* header .login border */
  --overlay: rgba(2, 7, 34, 0.72);
  /* text */
  --text: #f5f8ff;
  --text-strong: #ffffff;
  --muted: #99a8c9;
  --subtle: #8da2c6;            /* commerce.css muted */
  /* brand — product-ui.css accent (single primary) + site.css cyan / blue */
  --primary: #36d5ca;           /* --product-accent */
  --primary-hover: #5be2db;     /* ai-refresh primary family */
  --primary-ink: #052c33;       /* --product-accent-ink */
  --primary-text: #17e0e1;      /* --cyan (links, eyebrows, active text) */
  --primary-soft: rgba(23, 224, 225, 0.1);
  --primary-border: rgba(23, 224, 225, 0.33);  /* #17e0e155 */
  --accent: #1595ff;            /* --blue */
  --accent-text: #36a8ff;       /* --electric */
  --accent-soft: rgba(21, 149, 255, 0.14);
  --grad-brand: linear-gradient(#1595ff, #1595ff);        /* v4: solid (gradients removed); kept for compatibility */
  --grad-text: linear-gradient(90deg, #17e0e1, #17e0e1);          /* hero em: solid cyan (original)  */
  --grad-btn: linear-gradient(135deg, #36d5ca, #36d5ca);          /* .product-primary: solid original teal */
  --btn-ink: #052c33;
  --btn-shadow: none;
  --grad-hero: #030a25;  /* v4: flat page background (no glow) */
  --grad-band: #030a25;                      /* v4: page headers are plain */
  --grad-cta: #0c1436;          /* v4: flat panel (no gradient CTA band) */
  --grid-line: transparent;       /* .hero grid lines */
  --card-grad: none;          /* original cards are flat */
  /* header (site.css v7 product header) */
  --header-bg: rgba(5, 11, 43, 0.94);
  --nav-bg: #0b1640;
  --nav-border: #203b70;
  --nav-link: #91a4c5;
  --nav-link-hover: #f5f8ff;
  --nav-hover-bg: #ffffff0c;
  --nav-active-bg: linear-gradient(135deg, #1355a7, #11788f);
  --nav-active-text: #ffffff;
  --nav-active-shadow: inset 0 1px #ffffff22;
  --login-text: #d7e6ff;
  --login-border: #3a5689;
  --login-bg: transparent;
  --login-hover-bg: #ffffff0c;
  --signup-bg: #36d5ca;          /* v4: solid primary teal (product-ui accent) */
  --signup-ink: #052c33;
  --signup-shadow: none;
  --theme-bg: #0b1741;
  --theme-border: #294b82;
  --sun: #ff8418;
  /* market semantics — original green / orange / toast red; calendar impact palette */
  --up: #20bd72;
  --down: #e0442e;
  --warn: #ff8418;
  --info: #36a8ff;
  --up-soft: #20bd7222;
  --down-soft: #e0442e22;
  --warn-soft: #ff841822;
  --info-soft: #36a8ff22;
  --impact-high: #ef4444;
  --impact-medium: #f59e0b;
  --impact-low: #22c55e;
  --impact-holiday: #8b5cf6;
  --impact-none: #9aa8c3;
  --focus-ring: 0 0 0 3px #17e0e140;
  --focus-color: #17e0e1;   /* = --cyan, 2px outline */
  /* elevation (original .step / .launch-product shadows) */
  --shadow-1: 0 1px 2px #0000001f;
  --shadow-2: 0 2px 8px #00000033;
  --shadow-glow: none;
  --bg-2: #071043;
  --hero-1: #020722;
  --hero-2: #101d65;
  --glow-c: #1595ff55;
  --skeleton-a: #111b45;
  --skeleton-b: #0e2260;

  /* type (v5): one fixed scale; Latin first so digits / Latin use Inter,
     CJK falls through to the same Simplified-Chinese family on every OS */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "Noto Sans Mono CJK SC", monospace;
  --font-num: "Inter", "SF Pro Text", "Segoe UI", Roboto, Arial, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --text-display: 48px;  /* home hero headline only */
  --text-h1: 36px;       /* page title */
  --text-h2: 28px;       /* section title */
  --text-h3: 20px;       /* block / card title */
  --text-h4: 16px;
  --text-lead: 18px;     /* hero / page intro paragraph */
  --text-body: 16px;
  --text-small: 14px;    /* secondary text, tables, controls */
  --text-caption: 12px;  /* captions, table headers, footnotes */
  --lh-display: 1.25;
  --lh-heading: 1.35;
  --lh-ui: 1.5;
  --lh-body: 1.75;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* legacy size names mapped onto the scale */
  --fs-12: var(--text-caption);
  --fs-14: var(--text-small);
  --fs-16: var(--text-body);
  --fs-20: var(--text-h3);
  --fs-24: 24px;
  --fs-32: var(--text-h2);
  --fs-44: var(--text-h1);
  --fs-56: var(--text-display);
  --lh-tight: var(--lh-heading);
  --lh-base: var(--lh-body);

  /* spacing (v5): 8px scale. --sp-1 (4px) is the only half step, for icon/text gaps.
     Legacy --sp-3 / --sp-5 now resolve to 16 / 24 so every gap lands on the grid. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  /* semantic rhythm */
  --space-section: 96px;   /* between homepage sections */
  --space-block: 48px;     /* between blocks inside a page */
  --space-stack: 24px;     /* between components in a block */
  --space-item: 16px;      /* between items in a list / form */
  --space-inline: 8px;     /* between inline controls */
  --page-top: 48px;        /* inner page top padding */
  --row-h: 56px;           /* data table / list row */
  --row-h-head: 40px;      /* data table header row */

  /* radii */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
  --r-full: 999px;

  /* layout */
  --container: 1200px;
  --gutter: 24px;
  --header-h: 64px;
  --control-h: 40px;
  --control-h-sm: 32px;
  --control-h-lg: 48px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

html[data-theme="light"],
body.light {
  color-scheme: light;
  /* surfaces — original site.css body.light */
  --bg: #e9f2fb;
  --bg-alt: #edf5fc;
  --bg-deep: #f7fbff;           /* --nav */
  --panel: #f8fbff;
  --panel-2: #edf5fc;
  --panel-3: #dcebf8;
  --border: #c4d8e8;
  --border-strong: #9fbad2;     /* light .login border */
  --overlay: rgba(11, 29, 60, 0.42);
  --text: #0b1d3c;
  --text-strong: #0b1d3c;
  --muted: #5f718c;
  --subtle: #71819a;
  --primary: #087f82;           /* --product-accent (light) */
  --primary-hover: #066b6e;
  --primary-ink: #ffffff;
  --primary-text: #008fae;      /* --cyan (light) */
  --primary-soft: rgba(0, 143, 174, 0.09);
  --primary-border: rgba(0, 143, 174, 0.32);
  --accent: #126fe0;            /* --blue (light) */
  --accent-text: #197ff0;       /* --electric (light) */
  --accent-soft: rgba(18, 111, 224, 0.09);
  --grad-brand: linear-gradient(#126fe0, #126fe0);
  --grad-text: linear-gradient(90deg, #008fae, #008fae);
  --grad-btn: linear-gradient(135deg, #087f82, #087f82);
  --btn-ink: #ffffff;
  --btn-shadow: none;
  --grad-hero: #e9f2fb;
  --grad-band: #e9f2fb;
  --grad-cta: #f8fbff;
  --grid-line: transparent;
  --card-grad: none;
  --header-bg: rgba(247, 251, 255, 0.94);
  --nav-bg: #e7f0f8;
  --nav-border: #c4d8e8;
  --nav-link: #61758d;
  --nav-link-hover: #12345d;
  --nav-hover-bg: #ffffff;
  --nav-active-bg: linear-gradient(135deg, #deefff, #c8e6ff);
  --nav-active-text: #0c5cb5;
  --nav-active-shadow: inset 0 0 0 1px #a9cdf0;
  --login-text: #17436c;
  --login-border: #9fbad2;
  --login-bg: #ffffff;
  --login-hover-bg: #eaf4fc;
  --signup-bg: #087f82;
  --signup-ink: #ffffff;
  --signup-shadow: none;
  --theme-bg: #eef6ff;
  --theme-border: #b4cbe2;
  --sun: #e66c09;
  --up: #13995b;
  --down: #e0442e;
  --warn: #e66c09;
  --info: #197ff0;
  --up-soft: #13995b1a;
  --down-soft: #e0442e1a;
  --warn-soft: #e66c091a;
  --info-soft: #197ff01a;
  --impact-high: #ef4444;
  --impact-medium: #f59e0b;
  --impact-low: #22c55e;
  --impact-holiday: #8b5cf6;
  --impact-none: #9aa8c3;
  --focus-ring: 0 0 0 3px #008fae33;
  --focus-color: #008fae;
  --shadow-1: 0 1px 2px #174c750f;
  --shadow-2: 0 2px 8px #174c7517;
  --shadow-glow: none;
  --bg-2: #deebf7;
  --hero-1: #10245f;
  --hero-2: #17669b;
  --glow-c: #197ff033;
  --skeleton-a: #edf5fc;
  --skeleton-b: #dcebf8;
}

/* Legacy aliases — resolve to the original site.css variable meanings
   (declared on body too so they re-resolve under body.light) */
:root,
body {
  --bg2: var(--bg-2);
  --surface: var(--panel);
  --surface2: var(--panel-2);
  --surface3: var(--panel-3);
  --line: var(--border);
  --blue: var(--accent);
  --electric: var(--accent-text);
  --cyan: var(--primary-text);
  --green: var(--up);
  --orange: var(--warn);
  --red: var(--down);
  --nav: var(--bg-deep);
  --hero1: var(--hero-1);
  --hero2: var(--hero-2);
  --glow: var(--glow-c);
  --soft: var(--primary-soft);
  --product-accent: var(--primary);
  --product-accent-ink: var(--primary-ink);
  --product-radius: var(--r-lg);
  --product-max: var(--container);
}