/*
 * WisdomHub design tokens.
 * Colour aligned to "Design System (standalone).html" v3.0 (sean-handover/design system files),
 * CP ruling 14 Sep 2026: the sheet wins on every conflict except two AA failures inside the sheet
 * (muted text and the coral button, marked below). Ramp names and steps match the sheet so a hex
 * on the sheet and a token here always agree.
 *
 * Palette: deep navy #0D3B66 (primary, navy-700), warm coral #E8633B (secondary, coral-500),
 * soft violet #6366F1 (tertiary, violet-500), cool grey canvas #F4F5F7, slate ink #1E293B.
 * Fonts: Lora (display), Inter (UI/body), JetBrains Mono (refs and money). Lora and Inter come
 * from the <link> in each page head; the mono face and Lora 700 load here so no page needs editing.
 */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Lora:wght@700&display=swap");

:root {
  /* Radius scale = Design System v3.0 "Border Radius Scale" card: 4 / 8 / 10 / 14 / 20 / full.
     Two component values sit off the scale on the sheet itself and are kept as named tokens:
     card 16 (.card, modal) and 12 (menu, toast, search bar, table wrap, large button). */
  --radius-xs: 0.25rem;                            /* 4px   dividers, spacing blocks */
  --radius-sm: 0.5rem;                             /* 8px   tag, small button, skeleton line */
  --radius-md: 0.625rem;                           /* 10px  button, input, alert, icon button, nav item */
  --radius-lg: 0.875rem;                           /* 14px  trainer / session / stat card, dashed boxes */
  --radius-xl: 1.25rem;                            /* 20px  hero, section bands */
  --radius-full: 9999px;                           /*       pill, badge, avatar */
  --radius: 0.75rem;                               /* 12px  menu, toast, search bar, table wrap, btn-lg (sheet component value) */
  --radius-card: 1rem;                             /* 16px  .card, modal, chat bubble (sheet component value) */
  --radius-2xl: var(--radius-card);                /* alias kept for markup; Sean can collapse */
  --radius-3xl: var(--radius-xl);                  /* alias */
  --radius-4xl: var(--radius-xl);                  /* alias */

  /* Navy ramp. Same ten steps as the sheet; 700 is the brand navy. */
  --navy-50: #E8F0FE;
  --navy-100: #D6E8F5;
  --navy-200: #A8C8E0;
  --navy-300: #7AA5C8;
  --navy-400: #4D82AF;
  --navy-500: #2A6090;
  --navy-600: #184C78;
  --navy-700: #0D3B66;                             /* brand navy */
  --navy-800: #0A2E52;                             /* primary hover */
  --navy-900: #06203D;

  /* Coral ramp */
  --coral-50: #FFF5F2;
  --coral-100: #FFE0D5;
  --coral-200: #FFC4AB;
  --coral-300: #FFA580;
  --coral-400: #F98862;
  --coral-500: #E8633B;                            /* brand coral */
  --coral-600: #D4532D;
  --coral-700: #B54322;
  --coral-800: #8E3418;
  --coral-900: #6B2710;

  /* Violet ramp */
  --violet-50: #EEF2FF;
  --violet-100: #E0E7FF;
  --violet-200: #C7D2FE;
  --violet-300: #A5B4FC;
  --violet-400: #818CF8;
  --violet-500: #6366F1;                           /* brand violet */
  --violet-600: #4F46E5;
  --violet-700: #4338CA;
  --violet-800: #3730A3;
  --violet-900: #312E81;

  /* Neutral ramp (sheet "Cool Grey"). */
  --grey-50: #F8FAFC;
  --grey-100: #F1F5F9;
  --grey-200: #E2E8F0;
  --grey-300: #CBD5E1;
  --grey-400: #94A3B8;
  --grey-500: #64748B;
  --grey-600: #475569;
  --grey-700: #334155;
  --grey-800: #1E293B;
  --grey-900: #0F172A;

  /* Off-sheet, kept for now: amber text for time-based states (sheet has warning #F59E0B only). */
  --amber-700: #B45309;

  --canvas: #F4F5F7;                               /* cool grey canvas, flat (sheet) */
  --background: #FFFFFF;                           /* surface */
  --foreground: var(--grey-800);                   /* slate ink */

  --card: #FFFFFF;
  --card-foreground: var(--grey-800);
  --popover: #FFFFFF;
  --popover-foreground: var(--grey-800);

  --primary: var(--navy-700);                      /* deep navy: primary action */
  --primary-foreground: #FFFFFF;
  --primary-hover: var(--navy-800);                /* sheet: hover goes darker, never lighter */

  --secondary: var(--coral-500);                   /* warm coral: secondary accent */
  /* AA exception 1 (CP 14 Sep): the coral BUTTON uses coral-700, white on coral-500 is 3.3:1. */
  --secondary-button: var(--coral-700);
  --secondary-button-hover: var(--coral-800);
  --secondary-foreground: #FFFFFF;

  --coral: var(--coral-500);
  --violet: var(--violet-500);                     /* soft violet: tertiary */

  --accent: #F0F6FC;                               /* navy-tinted hover surface (sheet hover) */
  --accent-active: var(--navy-50);                 /* sheet: active nav, tab count, info alert, range bubble */
  --accent-foreground: var(--navy-700);
  --muted: var(--grey-100);
  /* AA exception 2 (CP 14 Sep): sheet neutral-500 #64748B is 4.36:1 on canvas; #5B6779 is 5.0:1. */
  --muted-foreground: #5B6779;

  --destructive: #DC2626;
  --destructive-foreground: #FFFFFF;
  --success: #059669;
  --success-foreground: #FFFFFF;
  --warning: #F59E0B;
  --warning-foreground: #1E293B;
  --border: var(--grey-200);
  --input: var(--grey-200);
  --ring: var(--navy-700);                         /* navy focus ring (keyboard outline) */
  --ring-focus: 0 0 0 3px rgba(13, 59, 102, 0.08); /* sheet input focus ring, also the selected ring on pack and pick cards */

  /* Elevation = sheet "Elevation Scale" card, black-based. Cards carry the sheet's card shadow and no border. */
  --shadow-flat: 0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);                          /* card hover (site addition: sheet cards have no hover) */
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
  --shadow-glow: 0 4px 16px rgba(232, 99, 59, 0.25);                     /* coral glow, brand accent */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --shadow-menu: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.04);        /* dropdown, toast */
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.2);
  /* Motion (S11): one curve for every transform. Transitions elsewhere are colour or opacity only. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* Pipeline stage colours (12 Sep). Live on a dot, never on a card edge. */
  --stage-interest: var(--warning);
  --stage-invited: var(--grey-400);
  --stage-discussion: var(--violet);
  --stage-confirmed: var(--primary);
  --stage-delivery: var(--coral);
  --stage-invoiced: var(--navy-500);
  --stage-claim: var(--success);
  --stage-closed: var(--grey-300);

  /* Fonts. Three, as on the sheet. */
  --font-display: "Lora", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* pipeline refs and money only */

  /* Type scale (px), the sheet's rows. Left name = this site, right = the sheet row it is. */
  --text-overline: 0.6875rem;   /* 11px  Caption, badge, section label */
  --text-caption: 0.75rem;      /* 12px  Label, tag, pill, helper text */
  --text-body-sm: 0.8125rem;    /* 13px  Body small */
  --text-body: 0.875rem;        /* 14px  Body */
  --text-body-lg: 1rem;         /* 16px  Body large */
  --text-subheading: 1.0625rem; /* 17px  H4, Inter 600 */
  --text-heading: 1.375rem;     /* 22px  H3, Inter 700 */
  --text-display: 1.9375rem;    /* 31px  H2, Lora 600 */
  --text-display-lg: 2.75rem;   /* 44px  H1, Lora 600 */

  /* Layout widths used across the site (Tailwind max-w-* equivalents). */
  --w-md: 28rem;    /* 448px  */
  --w-xl: 36rem;    /* 576px  */
  --w-2xl: 42rem;   /* 672px  */
  --w-3xl: 48rem;   /* 768px  */
  --w-4xl: 56rem;   /* 896px  */
  --w-5xl: 64rem;   /* 1024px */
  --w-6xl: 72rem;   /* 1152px */
}

/* ---------- Base ---------- */

*, *::before, *::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent; /* Android drew a blue box on every tap (CP 17 Sep) */
}

body {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.6;
  background-color: var(--canvas);
  color: var(--foreground);
  min-height: 100vh;
}

/* Headings follow the sheet's four rows: H1 and H2 in Lora, H3 and H4 in Inter. */
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1, h2, .font-display { font-family: var(--font-display); font-weight: 600; }
h1 { font-size: var(--text-display); line-height: 1.12; letter-spacing: -0.5px; }            /* mobile screens: H2 size */
@media (min-width: 640px) { h1 { font-size: var(--text-display-lg); } }                       /* H1 row */
h2 { font-size: var(--text-display); line-height: 1.2; letter-spacing: -0.3px; }
h3 { font-family: var(--font-sans); font-size: var(--text-heading); font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; }
h4 { font-family: var(--font-sans); font-size: var(--text-subheading); font-weight: 600; line-height: 1.35; letter-spacing: -0.1px; }

p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.hero :focus-visible, .band :focus-visible, .balance :focus-visible { outline-color: #fff; }

/* S11: motion is optional. Transforms and animations stop; colour and opacity changes stay. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-property: background-color, color, border-color, opacity, box-shadow !important; }
}