/* ==========================================================================
   AtoZTools.pro — Design Tokens
   Implements Master Build Brief v2, Section 4 (Design system, exact).
   Mobile-first: base values are the MOBILE sizes from the 4.3 table;
   the desktop sizes apply from the 768px breakpoint up (see 4.4).
   Breakpoints (4.4): 480 / 768 / 1024 / 1280 px.
   CSS custom properties cannot be used inside @media conditions, so the
   breakpoint values are applied literally in the media queries below and
   recorded here for reference:
     --bp-sm: 480px;  --bp-md: 768px;  --bp-lg: 1024px;  --bp-xl: 1280px;
   ========================================================================== */

:root {
  /* ---- 4.2 Color tokens (exact hex from the brief) ---- */
  --color-navy: #142B4A;        /* Brand, headings, footer background */
  --color-blue: #2563EB;        /* Primary buttons, links, active states */
  --color-blue-hover: #1D4ED8;  /* Button and link hover */
  --color-teal: #14B8A6;        /* FILLS ONLY (backgrounds, bars, decorative shapes). Never text on light backgrounds: ~2.5:1 on white fails WCAG AA. Fills pair with navy text. */
  --color-teal-text: #0F766E;   /* Text teal: links, icons-as-information, accent text/borders on light backgrounds (~5.9:1 on white, WCAG AA). */
  --color-teal-hover: #0D9488;  /* Hover fill for teal buttons (fill only, pairs with navy text). */
  --color-bg: #F8FAFC;          /* Page background */
  --color-surface: #FFFFFF;     /* Cards, forms, panels */
  --color-text: #334155;        /* Body text */
  --color-muted: #64748B;       /* Secondary text (do not use below 14px) */
  --color-border: #E2E8F0;      /* Borders and dividers */
  --color-success: #15803D;     /* Success messages */
  --color-warning: #B45309;     /* Warnings */
  --color-error: #B91C1C;       /* Errors */

  /* ---- 4.3 Typography: families ---- */
  /* Inter self-hosted WOFF2 (400/500/600/700, font-display: swap) in the
     build; system stack is the fallback. JetBrains Mono (400/500) for code. */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
    Consolas, "Liberation Mono", monospace;

  /* ---- 4.3 Typography: weights ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- 4.3 Typography: sizes — MOBILE values (base, mobile-first) ---- */
  --text-hero: 32px;        /* Homepage hero H1 */
  --text-h1: 28px;          /* Page H1 */
  --text-h2: 22px;          /* H2 */
  --text-h3: 19px;          /* H3 */
  --text-card-title: 17px;  /* Tool card title (same on mobile/desktop) */
  --text-body: 16px;        /* Body */
  --text-supporting: 14px;  /* Supporting text */
  --text-label: 13px;       /* Labels and metadata */
  --text-code: 13px;        /* Code */

  /* ---- 4.3 Typography: line heights ---- */
  --lh-hero: 1.15;
  --lh-h1: 1.2;
  --lh-h2: 1.25;
  --lh-h3: 1.3;
  --lh-card-title: 1.3;
  --lh-body: 1.5;        /* Body in UI */
  --lh-article: 1.65;    /* Body in articles */
  --lh-supporting: 1.5;
  --lh-label: 1.4;
  --lh-code: 1.55;

  /* ---- 4.4 Spacing scale (4–96px) ---- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* ---- 4.4 Layout ---- */
  --width-content: 1200px;  /* Max content width */
  --width-tool: 1240px;     /* Tool workspace max width */
  --width-article: 740px;   /* Article text column */
  --page-padding: 16px;     /* Page padding, mobile (32px from 768px up) */
  --card-padding: 24px;
  --header-height: 64px;    /* Section 5.2 */

  /* ---- 4.4 Radius ---- */
  --radius-card: 12px;      /* Cards */
  --radius-control: 10px;   /* Buttons and inputs */

  /* ---- 4.4 Borders and the single allowed shadow ---- */
  --border-width: 1px;
  --border-card: 1px solid var(--color-border);
  --shadow: 0 4px 14px rgba(20, 43, 74, 0.08); /* dropdowns, modals, hovered cards only */

  /* ---- 4.4 Controls ---- */
  --control-height: 46px;   /* Buttons and inputs */

  /* ---- 4.7 Motion (150–200ms transitions only) ---- */
  --duration-fast: 150ms;
  --duration: 200ms;
  --transition: var(--duration-fast) ease;
}

/* ==========================================================================
   Alias layer (audit remediation, 2026-10-24) — maintained, do not remove.
   site.css and the tool stylesheets were written against the alias names
   below; this block is the single place they are defined, each mapped
   onto the brief tokens above (or, where the brief has no counterpart,
   given the value its usage context and in-code fallbacks specify).
   ========================================================================== */
:root {
  /* Colours */
  --color-ink: #0F172A;                    /* Strongest text (fallback-verified) */
  --color-ink-2: #475569;                  /* Secondary text (fallback-verified) */
  --color-line: var(--color-border);       /* Borders and dividers */
  --color-line-strong: #CBD5E1;            /* Stronger borders (inputs, dropzone) */
  --color-surface-alt: #F1F5F9;            /* Alt surface (fallback-verified) */
  --color-placeholder: #94A3B8;            /* Input placeholder text */
  --color-code-bg: #0F172A;                /* Code block background */
  --color-code-text: #E2E8F0;              /* Code block text */
  --color-action-blue: var(--color-blue);  /* Primary action colour */
  --color-action-blue-hover: var(--color-blue-hover);
  --color-action-blue-tint: #DBEAFE;       /* Icon/callout tint (fallback-verified) */

  /* Spacing — index scale used by site.css (1 unit = 4px; the --space-Npx
     tokens above keep their brief values and are not redefined here) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-5: 20px;
  --space-6: 24px;
  --space-10: 40px;

  /* Type scale — T-shirt sizes used by site.css */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;                        /* Desktop hero size (brief 4.3) */

  /* Line heights */
  --leading-tight: var(--lh-h1);
  --leading-snug: var(--lh-h2);
  --leading-normal: var(--lh-body);
  --leading-relaxed: var(--lh-article);

  /* Radius */
  --radius-sm: 8px;                        /* Small controls (fallback-verified) */
  --radius-md: var(--radius-card);         /* Cards (12px) */
  --radius-full: 999px;                    /* Pills, tags, chips */

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(20, 43, 74, 0.05);
  --shadow-md: var(--shadow);             /* The brief's single shadow */
  --shadow-lg: 0 20px 40px rgb(0 0 0 / 0.18); /* Dropdowns/dialogs (fallback-verified) */

  /* Layout, motion, focus */
  --container-max: var(--width-content);   /* 1200px */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --focus-ring-width: 2px;                 /* Brief 4.5 / Section 11 */
  --focus-ring-color: var(--color-blue);
}

/* ---- 480px (4.4 breakpoint): small phones up.
   No token changes at this step; component grids adjust here in the build. */
@media (min-width: 480px) {
  :root {
    /* intentionally empty at token level */
  }
}

/* ---- 768px (4.4 breakpoint): tablet up — DESKTOP type sizes from 4.3 ---- */
@media (min-width: 768px) {
  :root {
    --text-hero: 48px;
    --text-h1: 38px;
    --text-h2: 28px;
    --text-h3: 22px;
    --text-card-title: 17px;
    --text-body: 17px;
    --text-supporting: 14.5px;
    --text-label: 13px;
    --text-code: 14px;
    --page-padding: 32px;   /* Page padding, desktop (4.4) */
  }
}

/* ---- 1024px (4.4 breakpoint): desktop.
   No token changes; tool workspaces switch to side-by-side at this step
   in the build (Section 5.6: inputs left, results right). */
@media (min-width: 1024px) {
  :root {
    /* intentionally empty at token level */
  }
}

/* ---- 1280px (4.4 breakpoint): wide desktop.
   No token changes; content is capped by --width-content / --width-tool. */
@media (min-width: 1280px) {
  :root {
    /* intentionally empty at token level */
  }
}

/* ---- 4.7 Motion: respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
  }
}

/* ==========================================================================
   Minimal base rules (no page-specific styling)
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1,
h2,
h3 {
  color: var(--color-navy);
  margin: 0 0 var(--space-16);
}

h1 {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: var(--lh-h1);
}

h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--lh-h2);
}

h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-h3);
}

a {
  color: var(--color-blue);
}

a:hover {
  color: var(--color-blue-hover);
}

code,
pre {
  font-family: var(--font-mono);
  font-size: var(--text-code);
  font-weight: var(--weight-regular);
  line-height: var(--lh-code);
}

/* Section 4.5 / Section 11: visible focus — 2px blue outline with offset */
:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}