/* Design tokens — OktoSub brand book v2.0 (design/README.md is the reference).
   Every colour, size, space, radius, shadow and duration in the other stylesheets comes from here.
   The living reference is /styleguide (development only). Mail templates mirror the colours in MailerHelper::COLORS. */
:root {
  /* ---------- Brand ---------- */
  --purple: #6C5CE7;
  --purple-deep: #5A4BD1;
  --purple-light: #8B7EF2; /* on dark backgrounds */
  --ink: #2D2A4A;
  --text: #3A3654;
  --text-muted: #6E6A88;
  --yellow: #FFC960;
  --yellow-hover: #FFBE45;
  --yellow-soft: #FFF1D2;
  --lilac: #F1EFFB;
  --lilac-soft: #CFC9F0;
  --lilac-mist: #F7F5FE; /* section gradients */
  --lilac-glow: #DCD6FA; /* blurred blobs behind the light hero */
  --line-lilac: #DDD8F3;
  --line-fine: #EEEBF8;
  --paper: #FDFDFF;
  --white: #FFFFFF;
  --canvas: #F6F5FC; /* background of the signed-in area */
  --hover-tint: #FBFAFE; /* row and card hover on white */
  --neutral-bg: #F1F0F5; /* neutral badge */

  /* Channels for translucent overlays and shadows: rgb(var(--ink-rgb) / .08). */
  --ink-rgb: 45 42 74;
  --purple-rgb: 108 92 231;
  --purple-light-rgb: 139 126 242;
  --yellow-rgb: 255 201 96;
  --white-rgb: 255 255 255;
  --paper-rgb: 253 253 255;
  --night-rgb: 30 27 56;

  /* ---------- On dark ---------- */
  --night: #1E1B38; /* darkest stop of the dark hero gradient */
  --night-violet: #3B2F8F; /* violet stop of the dark hero gradient */
  --dark-text: #DCD8F0;
  --dark-text-muted: #BDB7E0;
  --dark-line: #443F6B;
  --dark-outline: #5E5888;

  /* ---------- Statuses — only for statuses, always next to a word. Red is never decorative. ---------- */
  --status-paid: #23845A;
  --status-due: #E2574C; /* fills and dots; text and form errors use --error-field */
  --status-soon: #E8A13C;
  --status-soon-text: #3A2E10;
  --status-inactive: #9A96B5;

  /* ---------- Charts (US-2.15): one slot per person or club, in a fixed order, never reused. Checked for
     colour-blind separation; under 3:1 on white for 2-4, so every chart has a legend and a table view.
     They are not status colours: a chart never means paid or late. ---------- */
  --chart-1: #6C5CE7;
  --chart-2: #1BAF7A;
  --chart-3: #EDA100;
  --chart-4: #E87BA4;
  --chart-5: #2A78D6;
  --chart-other: #B7B3CC;

  /* ---------- Feedback surfaces ---------- */
  --success-bg: #E3F5EC;
  --success-line: #BFE6D1;
  --success-text: #17573A;
  --warning-bg: #FFF6E3;
  --warning-line: #F6DDA9;
  --warning-text: #92600F;
  --error-bg: #FBEDEC;
  --error-line: #F0C7C3;
  --error-text: #7A2A23;
  --error-field: #B83A30; /* error text, invalid fields, destructive buttons */

  /* ---------- Forms ---------- */
  --focus-ring: #E4E0FA;
  --placeholder: #A9A5C2;
  --line-input: #8E89AD; /* control edge: 3.3:1 on white (WCAG 1.4.11); line-lilac is 1.4:1 */

  /* ---------- Typography ---------- */
  --font-body: "Inter", system-ui, sans-serif;
  --font-display: "Bricolage Grotesque", var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Text scale. No half pixels; pick the nearest step. */
  --text-2xs: 11px;  /* tab bar labels, tiny caps */
  --text-xs: 12px;   /* table headings, small badges */
  --text-sm: 13px;   /* meta lines under a name */
  --text-md: 14px;   /* labels, hints, small buttons */
  --text-base: 15px; /* body text in the app */
  --text-lg: 16px;   /* inputs, buttons, lead text in the app */
  --text-xl: 17px;   /* body text on marketing pages, amounts */
  --text-2xl: 18px;
  --text-3xl: 20px;  /* card titles */
  --text-4xl: 22px;
  --text-5xl: 24px;

  /* Display headings grow with the viewport. */
  --text-display-xs: clamp(24px, 2.6vw, 30px);  /* stat values, panel headings */
  --text-display-sm: clamp(26px, 3.2vw, 34px);  /* page titles, auth titles */
  --text-display-md: clamp(28px, 3.6vw, 38px);  /* panel headlines */
  --text-display-lg: clamp(30px, 4.4vw, 44px);  /* marketing h2 */
  --text-display-xl: clamp(34px, 5.4vw, 56px);  /* closing calls to action */
  --text-display-2xl: clamp(38px, 6.2vw, 62px); /* marketing h1 */
  --text-display-3xl: clamp(44px, 7vw, 72px);   /* the big number in the stat band */
  --text-lead: clamp(18px, 2vw, 20px);          /* marketing lead paragraphs */

  --leading-none: 1;
  --leading-tight: 1.05;   /* display headings */
  --leading-heading: 1.15; /* page titles, card titles */
  --leading-snug: 1.3;     /* buttons, short labels */
  --leading-normal: 1.5;   /* body text */
  --leading-relaxed: 1.6;  /* long reads */

  --tracking-tighter: -.03em;
  --tracking-tight: -.02em;
  --tracking-snug: -.01em;
  --tracking-caps: .05em; /* uppercase labels */

  /* ---------- Spacing — named by pixels, 4px grid with 2px half steps below 16 ---------- */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;

  /* ---------- Controls ---------- */
  --control-sm: 40px;
  --control-md: 48px;
  --control-lg: 52px; /* inputs, selects and large buttons share this height */

  /* ---------- Radii ---------- */
  --radius-2xs: 4px;
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px; /* controls: buttons, inputs, choices */
  --radius-lg: 14px; /* tinted blocks inside cards */
  --radius-card: 20px;
  --radius-panel: 28px;
  --radius-pill: 99px;

  /* ---------- Borders ---------- */
  --border-hairline: 1px;  /* cards, dividers */
  --border-control: 1.5px; /* buttons, inputs, choices, chips */

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgb(var(--ink-rgb) / .04);
  --shadow-notification: 0 4px 14px rgb(var(--ink-rgb) / .08);
  --shadow-panel: 0 10px 30px rgb(var(--ink-rgb) / .07);
  --shadow-hero-card: 0 20px 50px rgb(var(--ink-rgb) / .10);
  --shadow-drawer: 0 20px 50px rgb(var(--ink-rgb) / .18);
  --shadow-featured: 0 18px 44px rgb(var(--purple-rgb) / .16);
  --shadow-focus: 0 0 0 4px var(--focus-ring); /* selected cards and focused fields */

  /* ---------- Motion ---------- */
  --duration-fast: .15s; /* hover and focus */
  --duration-base: .25s; /* drawers, lifts */
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* ---------- Layout ---------- */
  --content-max: 1160px;
  --shell-max: 1120px;
  --gutter: 20px;
  --section-pad: clamp(56px, 8vw, 104px);
  --header-height: 68px;
  --sidebar-width: 268px;
  --tabbar-height: 64px;

  /* Breakpoints (media queries cannot read custom properties, so these are documentation):
     400 small phone · 480 phone · 640 large phone · 720 tablet · 860 auth two columns ·
     1024 sidebar · 1180 wide split. Use min-width: N and max-width: N − 1. */
}