/* Ad Engine — design tokens
   Fonts (put in <head>):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap">
   Theme: light is default. Dark: <html data-theme="dark">. */

:root {
  /* Type */
  --font: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-num: 'Manrope', 'Geist', ui-sans-serif, sans-serif; /* money, credits, durations */
  --fs-2xs: 10.5px; --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-base: 13.5px; --fs-md: 15px; --fs-lg: 17px;
  --fs-xl: 21px; --fs-2xl: 24px; --fs-3xl: 32px; --fs-4xl: 40px;
  --lh-tight: 1.15; --lh: 1.45; --lh-loose: 1.6;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;
  --tracking-tight: -0.03em;

  /* Surfaces */
  --bg: #F6F6F3;            /* page */
  --surface: #FFFFFF;       /* cards, inputs, bars */
  --subtle: #F1F1EE;        /* hover, segmented track, inset areas */
  --subtle-2: #E7E7E2;      /* progress track, skeleton highlight */
  --line: #E3E3DE;          /* borders, dividers */
  --line-strong: #CBCBC4;   /* input borders, secondary buttons */
  --overlay: rgba(14,14,16,.42);

  /* Text */
  --text: #0E0E10;
  --muted: #53535A;
  --faint: #85858C;
  --inverse: #FFFFFF;

  /* Brand + action */
  --accent: #E8693F;        /* brand orange: logo card, active tab line, selection, progress */
  --accent-hover: #D65A31;
  --accent-soft: #FBEDE6;
  --accent-text: #A4441F;   /* orange text on light */
  --accent-ink: #0E0E10;    /* text on accent */
  --primary: #1B2B4B;       /* navy: primary buttons */
  --primary-hover: #26395F;
  --primary-ink: #FFFFFF;
  --ring: rgba(232,105,63,.26);

  /* Status */
  --ok: #13804A;     --ok-soft: #E2F4E9;
  --warn: #9A6500;   --warn-soft: #FFF3D1;
  --danger: #D02B2B; --danger-soft: #FCE7E7; --danger-ink: #FFFFFF;
  --info: #2763D6;   --info-soft: #E6EEFC;
  --stale: #6A6A76;  --stale-soft: #EEEEF2;

  /* Spacing (4pt) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* Radius (deliberately tight) */
  --radius-xs: 2px; --radius-sm: 3px; --radius: 4px; --radius-lg: 5px; --radius-xl: 6px; --radius-2xl: 8px; --radius-full: 999px;

  /* Elevation: flat UI. Floating layers get a hairline ring instead of a drop shadow. */
  --shadow: none;
  --shadow-float: 0 0 0 1px var(--line);
  --focus: 0 0 0 3px var(--ring);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: 120ms; --t: 200ms; --t-slow: 320ms;

  /* Layout */
  --appbar-h: 52px; --sidebar-w: 268px; --panel-w: 400px; --form-w: 380px;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0A0A0C; --surface: #131316; --subtle: #1A1A1E; --subtle-2: #232328;
  --line: #25252B; --line-strong: #393941; --overlay: rgba(0,0,0,.62);
  --text: #F3F3F0; --muted: #A7A7AE; --faint: #6F6F77; --inverse: #0E0E10;
  --accent: #EC7650; --accent-hover: #F28B68; --accent-soft: #2A1912; --accent-text: #F39A78; --accent-ink: #0E0E10;
  --primary: #3A5A98; --primary-hover: #4769AB; --primary-ink: #FFFFFF;
  --ring: rgba(236,118,80,.32);
  --ok: #3DD68C; --ok-soft: #0E2A1C; --warn: #F2B53A; --warn-soft: #2A200A;
  --danger: #FF5F5F; --danger-soft: #2E1212; --danger-ink: #0E0E10;
  --info: #74A4FF; --info-soft: #111D33; --stale: #9A9AA6; --stale-soft: #1E1E24;
  color-scheme: dark;
}