:root {
  --white: #ffffff;
  --whiteBackground: #f9fafb;
  --primary-blue: #3f63e8;
  --blue-600: #2f4fd6;
  --primary-blue-dark: #233a93;
  --secondary-blue: #6985f0;
  --success-green: #4ade80;
  --red: #ef4444;
  --red-50: #fef2f2;
  --red-800: #991b1b;
  --green-50: #f0fdf4;
  --green-800: #166534;
  --dark-gray: #333333;
  --light-page-bg: #f6f9fc;

  /* Gray palette */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --gray-border: #e5e7eb;
  --gray-placeholder: #9ca3af;
  --gray-input-border: #d1d5db;
  --gray-bg-light: #f3f4f6;

  /* Premium subscription theme.
     Semantic alias over the blue brand ramp. Anywhere a color means
     "this is the Premium plan" (pricing cards, subscribe buttons,
     portal subscription screens, upgrade emails) should reference these,
     NOT --blue-* or --purple-* directly, so the Premium color can be
     retargeted in one place. The purple ramp below is now decorative only
     (benefit-card icon tints, compare-page gradients, admin charts). */
  --premium-50: #eef2fe;
  --premium-100: #dde4fd;
  --premium-200: #c2cffb;
  --premium-300: #9bb0f7;
  --premium-400: #6985f0;
  --premium-500: #3f63e8;
  --premium-600: #2f4fd6;
  --premium-700: #2740b5;
  --premium-alpha-15: rgba(63, 99, 232, 0.15);
  --premium-alpha-20: rgba(63, 99, 232, 0.2);
  --premium-alpha-40: rgba(63, 99, 232, 0.4);

  /* Purple/Violet - decorative accents only (see --premium-* above) */
  --purple-50: #faf5ff;
  --purple-100: #f3e8ff;
  --purple-200: #e9d5ff;
  --purple-300: #c4b5fd;
  --purple-400: #a78bfa;
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;
  --purple-700: #6d28d9;

  /* Emerald/Teal - Credit/success states */
  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;

  /* Green palette */
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-900: #14532d;

  /* Red palette */
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;

  /* Amber/Orange - Warnings */
  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-800: #92400e;
  --amber-900: #78350f;

  /* Blue palette - cobalt/indigo brand ramp (shifted off the Tailwind defaults) */
  --blue-50: #eef2fe;
  --blue-100: #dde4fd;
  --blue-200: #c2cffb;
  --blue-300: #9bb0f7;
  --blue-400: #6985f0;
  --blue-500: #3f63e8;
  --blue-700: #2740b5;
  --blue-800: #233a93;
  --blue-900: #1f3275;

  /* Sky blue */
  --sky-50: #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-700: #0369a1;

  /* Indigo palette */
  --indigo-50: #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-500: #6366f1;
  --indigo-800: #3730a3;

  /* Cyan/Teal */
  --cyan-50: #ecfeff;
  --cyan-100: #cffafe;
  --cyan-500: #06b6d4;

  /* Pink */
  --pink-500: #ec4899;

  /* Additional neutrals */
  --black: #000000;
  /* Theme-aware primary text: black in light theme, white in dark theme.
     Use this for body/label/heading text instead of --black so it flips
     automatically. The dark value is set in the [data-theme="dark"] block below. */
  --admin-text: var(--black);
  /* Single monospace stack for code/IDs/values across admin pages. */
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  --neutral-111827: #111827;
  --neutral-f8f9fa: #f8f9fa;
  --neutral-f7f7f8: #f7f7f8;
  --dark-1a1a2e: #1a1a2e;
  --warm-bg: #f9f1e9;

  /* Indigo extended */
  --indigo-400: #818cf8;
  --indigo-700: #4338ca;

  /* Pink extended */
  --pink-400: #f472b6;

  /* Yellow/Warning */
  --yellow-warning-bg: #fff3cd;
  --yellow-warning-text: #856404;
  --yellow-highlight: #ffeaa7;
  --amber-200: #fde68a;
  --violet-100: #ede9fe;

  /* Blue extended */
  --blue-link: #0066cc;
  --blue-link-alt: #0078d4;
  --blue-e6f3ff: #e6f3ff;
  --blue-e3f2fd: #e3f2fd;
  --blue-90caf9: #90caf9;
  --gold-f0c040: #f0c040;

  /* Shadows & Overlays */
  --shadow-xs: rgba(0, 0, 0, 0.04);
  --shadow-sm: rgba(0, 0, 0, 0.05);
  --shadow-md: rgba(0, 0, 0, 0.06);
  --shadow: rgba(0, 0, 0, 0.08);
  --shadow-default: rgba(0, 0, 0, 0.1);
  --shadow-md2: rgba(0, 0, 0, 0.12);
  --shadow-lg: rgba(0, 0, 0, 0.15);
  --shadow-xl: rgba(0, 0, 0, 0.2);
  --overlay-light: rgba(0, 0, 0, 0.3);
  --overlay-medium: rgba(0, 0, 0, 0.4);
  --overlay-dark: rgba(0, 0, 0, 0.5);
  --overlay-darker: rgba(0, 0, 0, 0.6);

  /* White alpha */
  --white-alpha-05: rgba(255, 255, 255, 0.05);
  --white-alpha-10: rgba(255, 255, 255, 0.1);
  --white-alpha-12: rgba(255, 255, 255, 0.12);
  --white-alpha-15: rgba(255, 255, 255, 0.15);
  --white-alpha-20: rgba(255, 255, 255, 0.2);
  --white-alpha-22: rgba(255, 255, 255, 0.22);
  --white-alpha-25: rgba(255, 255, 255, 0.25);
  --white-alpha-30: rgba(255, 255, 255, 0.3);
  --white-alpha-40: rgba(255, 255, 255, 0.4);
  --white-alpha-50: rgba(255, 255, 255, 0.5);
  --white-alpha-60: rgba(255, 255, 255, 0.6);
  --white-alpha-80: rgba(255, 255, 255, 0.8);
  --white-alpha-90: rgba(255, 255, 255, 0.9);
  --white-alpha-95: rgba(255, 255, 255, 0.95);
  --white-alpha-96: rgba(255, 255, 255, 0.96);

  /* Blue alpha */
  --blue-alpha-08: rgba(59, 130, 246, 0.08);
  --blue-alpha-10: rgba(59, 130, 246, 0.1);
  --blue-alpha-12: rgba(59, 130, 246, 0.12);
  --blue-alpha-15: rgba(59, 130, 246, 0.15);
  --blue-alpha-20: rgba(59, 130, 246, 0.2);
  --blue-alpha-30: rgba(59, 130, 246, 0.3);
  --blue-alpha-40: rgba(59, 130, 246, 0.4);
  --blue-alpha-50: rgba(59, 130, 246, 0.5);
  --blue-alpha-80: rgba(59, 130, 246, 0.8);
  --blue-600-alpha-0: rgba(37, 99, 235, 0);
  --blue-600-alpha-10: rgba(37, 99, 235, 0.1);
  --blue-600-alpha-20: rgba(37, 99, 235, 0.2);
  --blue-600-alpha-30: rgba(37, 99, 235, 0.3);
  --blue-600-alpha-70: rgba(37, 99, 235, 0.7);

  /* Green alpha */
  --green-alpha-10: rgba(16, 185, 129, 0.1);
  --green-alpha-15: rgba(16, 185, 129, 0.15);
  --green-alpha-20: rgba(16, 185, 129, 0.2);
  --green-alpha-30: rgba(16, 185, 129, 0.3);

  /* Red alpha */
  --red-alpha-15: rgba(239, 68, 68, 0.15);
  --red-alpha-20: rgba(239, 68, 68, 0.2);

  /* Purple alpha */
  --purple-alpha-15: rgba(139, 92, 246, 0.15);
  --purple-alpha-20: rgba(139, 92, 246, 0.2);
  --purple-alpha-40: rgba(139, 92, 246, 0.4);

  /* Amber alpha */
  --amber-alpha-15: rgba(245, 158, 11, 0.15);
  --amber-alpha-20: rgba(245, 158, 11, 0.2);

  /* Gray alpha */
  --gray-700-alpha-50: rgba(55, 65, 81, 0.5);
  --gray-alpha-20: rgba(107, 114, 128, 0.2);
  --gray-rgb-border: rgb(225, 225, 225);

  /* Indigo alpha */
  --indigo-alpha-20: rgba(99, 102, 241, 0.2);

  /* Blue-400 alpha */
  --blue-400-alpha-20: rgba(96, 165, 250, 0.2);

  /* Additional neutrals (extended) */
  --near-black: #111111;
  --neutral-f7fafc: #f7fafc;
  --neutral-edf2f7: #edf2f7;
  --neutral-f1f1f1: #f1f1f1;
  --neutral-f0f0f0: #f0f0f0;
  --neutral-eee: #eeeeee;
  --neutral-ddd: #dddddd;
  --neutral-cccfd5: #cccfd5;
  --neutral-a3a3a3: #a3a3a3;
  --neutral-656565: #656565;

  /* Slate/Navy */
  --slate-1a202c: #1a202c;
  --slate-2d3748: #2d3748;
  --slate-3f4f63: #3f4f63;
  --navy-1a365d: #1a365d;
  --navy-1e3a5f: #1e3a5f;

  /* Brand/Gradient colors */
  --brand-yellow: #FCC624;
  --purple-50-alt: #f5f3ff;

  /* Additional alpha */
  --shadow-xxs: rgba(0, 0, 0, 0.07);
  --gold-alpha-15: rgba(240, 192, 64, 0.15);
  --red-alpha-10: rgba(239, 68, 68, 0.1);
  --red-alpha-30: rgba(239, 68, 68, 0.3);
  --pink-alpha-15: rgba(236, 72, 153, 0.15);
  --green-alpha-40: rgba(16, 185, 129, 0.4);
  --violet-alpha-02: rgba(147, 51, 234, 0.02);
  --violet-alpha-05: rgba(147, 51, 234, 0.05);
  --violet-alpha-15: rgba(147, 51, 234, 0.15);
  --violet-alpha-20: rgba(147, 51, 234, 0.2);
  --sky-alpha-20: rgba(14, 165, 233, 0.2);
  --purple-alpha-50: rgba(139, 92, 246, 0.5);
  --gray-alpha-30: rgba(107, 114, 128, 0.3);

  /* Hero/Footer theme */
  --hero-gradient-start: #0f172a;
  --hero-gradient-end: #1e293b;
  --hero-badge-bg: rgba(255, 255, 255, 0.1);
  --hero-badge-border: rgba(255, 255, 255, 0.2);
}

/* Dark theme: primary text flips to white. Keep this in sync with --admin-text
   above so body/label/heading text reads correctly on dark backgrounds. */
[data-theme="dark"] {
  --admin-text: var(--white);
}

/* ============================================================
   Scales.

   Sizes, radii and shadows used to be picked per rule, which left the six
   marketing stylesheets carrying 55 font sizes, 16 corner radii and 44
   shadows between them. Values a fraction of a pixel apart read as noise
   rather than hierarchy, so everything below is a step a rule can land on.

   Steps are whole pixels at the 16px root. Nothing here is theme-dependent:
   the elevation tokens reference the shadow colours above, which are, so
   they follow dark mode on their own.
   ============================================================ */
:root {
  /* Page type. The floor is 12px; anything smaller belongs to a mockup. */
  --text-2xs: 0.75rem;    /* 12 - eyebrows, table cells, fine print */
  --text-xs: 0.875rem;    /* 14 - captions, secondary copy */
  --text-sm: 1rem;        /* 16 - body default, buttons */
  --text-md: 1.125rem;    /* 18 - lead paragraphs, card copy */
  --text-lg: 1.25rem;     /* 20 - hero subtitles */
  --text-xl: 1.5rem;      /* 24 */
  --text-2xl: 1.75rem;    /* 28 */
  --text-3xl: 2rem;       /* 32 */
  --text-4xl: 2.25rem;    /* 36 - section headings */
  --text-5xl: 2.5rem;     /* 40 */
  --text-6xl: 3rem;       /* 48 */
  --text-7xl: 3.5rem;     /* 56 - home hero */
  --text-8xl: 4rem;       /* 64 - tool and calculator display headings */
  --text-9xl: 5rem;       /* 80 */
  --text-10xl: 6.5rem;    /* 104 - the numeral on the guides hub */

  /* Type inside the product mockups, which sit below the page floor. A
     simulated desktop app shown at reduced size needs its own ramp;
     borrowing the page scale would make the mockups read as page copy
     rather than as an application. Above 13px they rejoin the page scale. */
  --demo-text-3xs: 0.5rem;      /* 8 */
  --demo-text-2xs: 0.5625rem;   /* 9 */
  --demo-text-xs: 0.625rem;     /* 10 */
  --demo-text-sm: 0.6875rem;    /* 11 */
  --demo-text-md: 0.75rem;      /* 12 */
  --demo-text-lg: 0.8125rem;    /* 13 */

  /* Corner radius. */
  --radius-xs: 3px;    /* mockup detail: chips, bars, tags */
  --radius-sm: 8px;    /* small controls */
  --radius-md: 12px;   /* buttons, inputs, panels */
  --radius-lg: 16px;   /* cards, device frames, large media */
  --radius-xl: 20px;   /* the largest panels and hero surfaces */
  --radius-pill: 50px;
  --radius-round: 50%;

  /* Elevation. Focus rings, inset accents and the mockups' own lighting are
     not elevation and stay written out at the rule that needs them. */
  --elevation-xs: 0 1px 3px var(--shadow-sm);
  --elevation-sm: 0 2px 8px var(--shadow-sm);
  --elevation-md: 0 6px 18px var(--shadow-md), 0 1px 3px var(--shadow-sm);
  --elevation-lg: 0 12px 32px var(--shadow-default);
  --elevation-xl: 0 20px 46px var(--shadow-lg), 0 4px 12px var(--shadow-sm);

  /* A framed screenshot or mockup: a long shadow plus a hairline edge. */
  --elevation-frame: 0 30px 60px -15px var(--overlay-medium), 0 0 0 1px var(--gray-200);
  --elevation-frame-dark: 0 30px 60px -15px var(--overlay-dark), 0 0 0 1px var(--white-alpha-15);

  /* The blue cast under a primary button, at rest and on hover. */
  --elevation-brand: 0 4px 14px var(--blue-alpha-40);
  --elevation-brand-strong: 0 8px 25px var(--blue-alpha-50);

  /* A light control sitting on a dark surface, where a blue cast would read
     as a glow rather than a shadow. The hero's white button uses these. */
  --elevation-on-dark: 0 10px 30px var(--overlay-dark);
  --elevation-on-dark-strong: 0 14px 38px var(--overlay-dark);

  /* Ramp members the marketing pages referenced as literals. */
  --cyan-600: #0891b2;
  --sky-300: #7dd3fc;

  /* Mockup chrome. Not brand colours: these paint a simulated application
     window, so they are named for what they depict. */
  --demo-studio-navy: #0a1652;
  --demo-terminal-bg: #0c1222;
  --demo-window-close: #ff5f57;
  --demo-window-minimise: #ffbd2e;
  --demo-window-zoom: #28c840;
}