/* Soraian AI — the brand foundation (ADC-114).
 *
 * The one home of Soraian's design tokens: colour, spacing, radii, shadows, gradients, outlines, the
 * type families and motion, as CSS custom properties. Every app builds from this file through its
 * `vercel.apps.<app>.build_inputs` entry, never a copy in its own folder; each design system is
 * generated from it and its theme (`themes/`, `systems.yaml`) by `python -m scripts.design build`.
 *
 * The brand guide's five colours are marked "Brand guide:" below. Each token's comment is its usage
 * note, which the design systems carry as the token's usage; edit a note here, never in a system.
 */
:root {

  /* ── colour ── */
  /* One theme: the site ships light only. Names from tokens.css are the contract (the chat widget reads the same names); a note beginning 'Inline:' marks a token named here from a literal that recurs in index.html or styles.css. */
  /* The link teal on light grounds: the accessible shade of the guide's Darker Teal (5.19:1 on white, 4.76:1 on #f5f5f5; `Sovereign`, ADC-114 U1 R1). The primary teal: links, chip and step icons, eyebrows and rules from Who We Serve down, the focus outline, the bold turn inside body copy. Text on color-surface, color-surface-tint and color-brand-tint (5.2:1 on white). */
  --color-brand: #0d7a72;
  /* The brighter teal: the hero headline and subhead, the Problem and Solution eyebrows, rules and icon strokes, the nav toggle, hover emphasis. As text it is 4.2:1 on white — fine at display size (the hero), short of AA at the 12.5–16px eyebrows; the phone block swaps it for color-brand-a11y. */
  --color-brand-bright: #0d8a86;
  /* The deep teal: the display headings Who We Serve, Our Commitment and Start With a Conversation; the fill of the numbered badges, the process hub disc and the selected-state check disc (white on it, 7.5:1). */
  --color-brand-deep: #0f5f58;
  /* The pale teal wash: icon wells beside teal icons, the status and 'We're here to help' pills, the nav link hover fill, the dashboard's active nav row. */
  --color-brand-tint: #eaf3f2;
  /* The softer wash: the pull-quote band, the conversation panel's idle wells and mic ring, the inbox stage's card wells. */
  --color-brand-tint-soft: #eef5f4;
  /* The voice stage's animated wave strokes and the mic's pulse ring. Decorative; never text. */
  --color-brand-wave: #9ecdc9;
  /* Dark teal ink: the conversation panel's titles, Playfair card titles (who-we-serve, steps, the process card, the founder's name), the plan heading, the footer wordmark and contact links, the founder stat numbers. 11.6:1 on white. */
  --color-ink: #123f3b;
  /* Brand guide: Dark Charcoal Grey. Origin palette ('Dark Charcoal Grey'): the body's base ink — bold list titles, the masthead and footer links, the Problem and Solution headings, hero-card and tile labels. */
  --color-ink-strong: #1a1a1a;
  /* Small bold titles: the scrambled-tool cards, the idle prompt 'Choose how you'd like to connect.', the switch-to-voice strip. */
  --color-ink-title: #1f2a28;
  /* Body copy in the Commitments, Guide, Plan and CTA sections and the modal; the modal's secondary button label. 7.7:1 on white, 7.6:1 on color-surface-tint. */
  --color-text: #4a5553;
  /* Hints, captions and status lines: pick-card sublines, 'Sora is online', voice hints, 'Every engagement starts with a conversation'. 3.8:1 on white — a real source pair that misses AA at 12.5–13.5px; the phone block remaps it to color-muted-a11y. */
  --color-muted: #7b8583;
  /* The page and the white sections (Problem, Who We Serve, Guide, CTA); the conversation panel, the modal, tiles and the inbox cards. */
  --color-surface: #ffffff;
  /* The card fill: who-we-serve, commitment, step and pick cards, the founder frame; the panel's footer strip. */
  --color-surface-tint: #fbfdfd;
  /* Borders on cards, the conversation panel, the pick cards, the avatar ring and the modal's secondary button. */
  --color-line: #e6edec;
  /* Dividers inside the panel (its header and switch strip) and the process card's inner rule. */
  --color-line-soft: #eef4f3;
  /* The dashed divider between the idle panel's two wells; the footer's ornament rules and the wordmark's underline. */
  --color-line-dashed: #cfdedb;
  /* The 7px status dot: 'Sora is online', 'Voice conversation active', 'Connected securely'. Never text. */
  --color-success: #2fae64;
  /* The status dot while a voice call connects or retries. Never text. */
  --color-pending: #e0b341;
  /* Problem-list icon strokes, the modal's warning icon, the failed voice dot, error hints. As text on white 4.9:1. */
  --color-danger: #b5544a;
  /* The icon well behind every danger icon: the Problem list, the modal, the scrambled-tool cards, the inbox stage's urgent card. */
  --color-danger-tint: #fbeeec;
  /* The 'before' state: the 'Before: disconnected tools' label, its five tiles' icons and labels (5.95:1 on color-surface-band, 6.55:1 on the tiles). */
  --color-danger-strong: #a4392f;
  /* Brand guide: Darker Teal. Origin palette — 'Darker Teal', the brand's first teal. Survives on the site as the default link colour (styles.css `a`); every other teal here descends from it. 4.8:1 on white. */
  --color-origin-teal: #008080;
  /* Brand guide: Lighter Teal — a fill, an accent, and the link teal on dark grounds (7.22:1 on #121212); never text on a light ground (2.59:1 on white). Origin palette — 'Lighter Teal'. Survives as the link hover colour (styles.css `a:hover`). 2.6:1 on white — hover-only, never resting text. */
  --color-origin-teal-light: #00b3b3;
  /* Brand guide: Darkest Grey. Origin palette — 'Darkest Grey'. Not used anywhere on the site; kept as the brand's darkest ground should a dark surface ever be needed (white on it 19.3:1). */
  --color-origin-charcoal: #121212;
  /* Brand guide: Light Neutral Gray. Origin palette ('Light Neutral Gray') and inline: the alternating section band. The masthead and hero, The Solution, Our Commitment and The Plan sit on it; the sections between them sit on color-surface. */
  --color-surface-band: #f5f5f5;
  /* Inline: the who-we-serve tag chips' fill, and the hover fill of the pick cards and the switch-to-voice strip. */
  --color-surface-hover: #f4faf9;
  /* Inline: the pull quote's two opening lines in Playfair on color-brand-tint-soft (9.1:1). */
  --color-quote: #334845;
  /* Inline: the neutral body grey of the hero, Problem and Solution sections, the legal pages' prose. 7.3:1 on white, 6.8:1 on color-surface-band. */
  --color-text-neutral: #565656;
  /* Inline: the Who We Serve paragraph, the tag chips' labels, the handwritten Caveat notes. */
  --color-text-strong: #3f4a48;
  /* Inline: the founder stat labels and the process card's subline. 5.9:1 on white. */
  --color-text-soft: #5c6664;
  /* Inline: the hero cards' supporting lines on their frosted fill. */
  --color-text-card: #5f6866;
  /* Inline: the footer copyright and the legal pages' effective-date line. 3.0:1 — metadata weight only; the phone block remaps it to color-muted-a11y. */
  --color-muted-soft: #8c9694;
  /* Inline (styles.css, phone): the one accessible grey that replaces color-muted, color-muted-soft and the dashboard grey at ≤720px — at least 4.83:1 on every ground the page uses. */
  --color-muted-a11y: #636d6b;
  /* Inline (styles.css, phone): color-brand-bright darkened for text at ≤720px, clearing 4.5:1 on white and color-surface-band. */
  --color-brand-a11y: #0a6f6b;
  /* Inline: the 'Outdated. Fragmented. Overwhelming.' eyebrow and the scrambled-tool cards' sublines. 4.4:1 on white; the phone block remaps it to color-rust-a11y. */
  --color-rust: #a9645c;
  /* Inline (styles.css, phone): color-rust darkened for text at ≤720px. */
  --color-rust-a11y: #8c4f47;
  /* Inline: the scrambled-tool cards' border; the end-call button's border is #f0dcda. */
  --color-rust-line: #f0e2e0;
  /* Inline: the scrambled-tool cards' fill; the before tiles in their problem state use #fffbfa. */
  --color-rust-surface: #fffdfd;
  /* Inline (styles.css): the before tiles' border in the problem state. */
  --color-danger-line: #e9d2ce;
  /* Inline: the who-we-serve cards' and the owner-led card's border. */
  --color-line-card: #e4edeb;
  /* Inline: the before and after tiles' border; the tag chips' is #e0ecea. */
  --color-line-chip: #ebedec;
  /* Inline: the nav link pill's border on hover. */
  --color-line-hover: #cfe2df;
  /* Inline: the hairlines flanking the paw ornament (pull quote, Who We Serve). */
  --color-line-ornament: #c8ded9;
  /* Inline: the vertical rail between step badges; the who-we-serve fork stroke is color-brand and its phone spine #cfe0dd. */
  --color-line-connector: #dfe8e6;
  /* Inline: the founder card's dividers and stat separators, the who-we-serve cards' footer rule. */
  --color-line-inner: #e8f0ef;
  /* Inline: the footer ornament's 5px dots and the footer links' 4px separator. */
  --color-ornament-dot: #b9cfcb;
  /* Inline: the hexagon glyph on the footer rule. */
  --color-ornament-hex: #a9c4c0;
  /* Inline: the pick cards' trailing chevron in the unselected state. */
  --color-chevron: #a9b2b0;
  /* Inline: the before tiles' icon strokes in the neutral state, the dashboard mock's chrome text; their labels are #6f7674. */
  --color-icon-muted: #7d8583;
  /* Inline: the modal's secondary button fill ('Keep this one'); its hover is #eceff0. */
  --color-cancel-fill: #f4f6f6;
  /* Inline: the voice stage's 64px mic disc (white icon on it). */
  --color-mic: #0f7d79;
  /* Inline: the voice stage's static secondary wave strokes. */
  --color-wave-soft: #c8e2df;
  /* Inline: the modal backdrop over the page. */
  --color-scrim: rgba(18, 42, 40, 0.45);
  /* Illustration only — the inbox stage's urgent-card dot (script.js). */
  --color-mock-urgent: #d1483b;
  /* Illustration only — the inbox stage's unread-count pill. */
  --color-mock-count: #b5443a;
  /* Illustration only — the solution mock's laptop bezel. */
  --color-mock-bezel: #33363a;
  /* Illustration only — the dashboard mock's wordmark and stat values. */
  --color-mock-dash-ink: #12403e;

  /* ── spacing ── */
  /* No modular scale: the canvas set literal values and the site keeps them. These are the recurring ones; a note lists the neighbours it stands for. */
  /* The section shell's side padding at desktop: clamp(20px, 5vw, 50px) — 30px at ≤1024px, 16px at ≤720px (the CTA shell caps at 44px). */
  --gutter: 50px;
  /* The common shell max-width (Problem, pull quote, Who We Serve). Hero 1300, Solution and Commitments 1400, Guide and Plan 1320, CTA 928, footer 1240 — each centred with margin auto. */
  --shell-max: 1360px;
  /* Shell top padding (hero, Problem); Solution 62, Who We Serve and Commitments 58, Guide 70, Plan 72, CTA 96, pull quote 56. Phone: 44px (the hero 12px). */
  --section-top: 64px;
  /* Shell bottom padding (Problem, Commitments); hero 88, Solution 62, Who We Serve 66, Guide and Plan 84, pull quote 60. Phone: 48px. */
  --section-bottom: 72px;
  /* Between a section's two columns: hero 56 (row gap 48), Problem 72 (44), Solution 60 (44), Plan 44, Commitments 32 (28), CTA 44 (36). */
  --column-gap: 56px;
  /* The who-we-serve card grid; the commitment card's image-to-text gap. */
  --grid-gap: 22px;
  /* Between stacked cards: commitment cards, step cards (as margin-bottom), the pick cards 12px. */
  --stack-gap: 16px;
  /* Between icon-list rows (Solution; the Problem's 19px) and from a list row's well to its text (the Problem's 20px). */
  --list-gap: 18px;
  /* Inside a control: the CTA's icon to label, the footer ornament's parts; a pick card's well to text 16px; a list row's icon well to text 18–20px. */
  --inline-gap: 12px;
  /* Between tag chips and after tiles; a chip's icon to its label 7px; a status pill's dot to its text 7–8px. */
  --chip-gap: 9px;
  /* Card side padding: who-we-serve and step cards 24, the pick cards and panel header 20–22, commitment cards 20 (14 on the image side), the founder frame 48. */
  --card-pad-x: 24px;
  /* Card top padding: who-we-serve 22 (bottom 20), steps 20, pick cards 16, the panel header 18, the founder frame 52 (bottom 44), the modal 30 (bottom 26, sides 32). */
  --card-pad-y: 22px;
  /* The primary CTA pill's vertical padding; the modal buttons and Retry 13px. */
  --cta-pad-y: 17px;
  /* The primary CTA pill's horizontal padding; the modal buttons 22px; narrow phones 20px. */
  --cta-pad-x: 32px;
  /* Masthead link pill padding (the footer's 8px). */
  --nav-pad-y: 12px;
  /* Masthead and footer link pill side padding. */
  --nav-pad-x: 16px;
  /* Tag chip vertical padding; status pills 7px. */
  --chip-pad-y: 8px;
  /* Tag chip side padding; status pills 14px. */
  --chip-pad-x: 12px;
  /* The smallest icon well: after tiles, the process card's area icons, the switch strip, the scrambled cards (icon 16–17px). */
  --well-xs: 32px;
  /* Founder stat wells (icon 22px); the footer contact wells 42px (icon 19px). */
  --well-sm: 40px;
  /* Pick card wells and the panel avatar (icon 20px); the Solution list and hero cards 46px (icon 21px); who-we-serve cards 46px (icon 24px). */
  --well-md: 44px;
  /* The Problem list wells and the modal's warning well (icon 22px); the process hub disc (icon 27px, white). */
  --well-lg: 48px;
  /* Step card wells (icon 24px); the owner-led card's 52px (icon 26px). */
  --well-xl: 54px;
  /* The idle panel's two choice wells (icon 30px); the voice stage's mic ring 110px around a 64px disc (icon 26px). */
  --well-2xl: 74px;
  /* The step number disc (font 14px); the commitment cards' 34px (font 12.5px); the selected-state check disc 26px; the after tiles' check 16px. */
  --badge: 38px;
  /* The 2px accent rule under an eyebrow or the hero subhead (margin 12px 0 30px after an eyebrow); the Plan's 72px centred; the portrait card's 32px. */
  --rule-accent: 44px;
  /* Accent rules and the selected-state ring; every other rule and border is 1px. */
  --rule-thickness: 2px;
  /* The phone floor for tap targets (styles.css, ≤720px): the close control, Retry, footer links, contact links. */
  --touch-min: 44px;
  /* The commitment cards' circular illustrations; the founder portrait card is 310px wide (max 44%). */
  --portrait: 180px;

  /* ── radius ── */
  /* Capsules and discs everywhere else; panels 18, cards 16 or 14. */
  /* Buttons, chips, pills, icon wells, badges, avatars, the circular illustrations — anything that is a capsule or a disc. */
  --radius-pill: 999px;
  /* The conversation panel, the modal, the portrait card, the process card, the inbox stage's cards. */
  --radius-panel: 18px;
  /* Who-we-serve cards, the owner-led card, the hero cards' frosted body. */
  --radius-card: 16px;
  /* The portrait image inside its card, the scrambled-tool cards. */
  --radius-sm: 12px;
  /* Inline: commitment cards, step cards, pick cards, the selected-state ring; the inbox tray. */
  --radius-card-sm: 14px;
  /* Inline: the founder card's outer frame — the largest radius on the page. */
  --radius-frame: 22px;
  /* Inline: the after tiles (the before tiles 10px). */
  --radius-tile: 11px;
  /* Inline: the who-we-serve tag chips; the solution mock's toasts. */
  --radius-chip: 9px;
  /* Inline: the dashboard mock's cards and screen; the mock's chrome buttons 5px. */
  --radius-xs: 8px;
  /* Inline (styles.css): the nav toggle's focus outline radius. */
  --radius-focus: 6px;

  /* ── shadow ── */
  /* Long, soft, negative-spread shadows in a teal-black — lifted paper, never a hard drop. Every rgba is a tint of #14323a / #122a28. */
  /* The conversation panel at rest. */
  --shadow-panel: 0 24px 50px -38px rgba(20, 50, 48, .45);
  /* The switch-confirmation modal over the scrim. */
  --shadow-modal: 0 40px 80px -40px rgba(18, 42, 40, .6);
  /* Inline: commitment and step cards; who-we-serve cards at -26px/0.26; the owner-led card 0 16px 34px -26px 0.28. */
  --shadow-card: 0 14px 30px -28px rgba(20, 50, 48, 0.3);
  /* Inline (.hv4): pick cards on hover, with the fill going color-surface-hover. */
  --shadow-card-hover: 0 12px 26px -22px rgba(20, 50, 48, 0.4);
  /* Inline: the founder card's outer frame. */
  --shadow-frame: 0 26px 54px -40px rgba(20, 50, 48, 0.4);
  /* Inline: the process card; the portrait card 0 20px 40px -32px 0.45. */
  --shadow-raised: 0 22px 44px -34px rgba(20, 50, 48, 0.45);
  /* Inline: the hero cards' frosted body (rgba(255,255,255,.74) fill, rgba(255,255,255,.78) border). */
  --shadow-glass: 0 14px 30px -18px rgba(20, 40, 38, 0.34);
  /* Inline: the hero cards' white icon wells (border rgba(13,138,134,.2)). */
  --shadow-well-hero: 0 2px 7px rgba(20, 40, 38, 0.14), 0 12px 24px -14px rgba(20, 40, 38, 0.28);
  /* The primary CTA pill and the modal's confirm button at rest — an inner highlight plus a teal-black drop. */
  --shadow-cta: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 18px -10px rgba(0, 72, 70, 0.5);
  /* Inline (.hv2): the CTA on hover, with gradient-brand-hover and a -1px lift. */
  --shadow-cta-hover: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 13px 26px -10px rgba(0, 96, 94, 0.5);
  /* Inline (.ac2): the CTA pressed — the lift returns to 0 and the highlight inverts to a press. */
  --shadow-cta-active: inset 0 2px 5px rgba(0, 48, 46, 0.28), 0 4px 10px -6px rgba(0, 72, 70, 0.45);
  /* Inline (.hv1): masthead and footer link pills on hover, with color-brand-tint fill, color-line-hover border and a -1px lift. */
  --shadow-nav-hover: 0 8px 18px -12px rgba(20, 50, 48, 0.4);
  /* Inline (.ac1): link pills pressed. */
  --shadow-nav-active: inset 0 2px 4px rgba(20, 50, 48, 0.12);
  /* Inline: the process hub's color-brand-deep disc; the mic disc 0 12px 24px -14px rgba(15,95,88,.7). */
  --shadow-badge-deep: 0 12px 22px -12px rgba(15, 95, 88, 0.6);
  /* Inline: the scrambled-tool cards — the one warm-toned shadow; the end-call button 0 10px 22px -16px rgba(60,30,26,.5). */
  --shadow-rust-card: 0 12px 26px -22px rgba(60, 30, 26, 0.4);
  /* styles.css: the dashboard mock's stat card while its value updates (border color #b6dedb). */
  --shadow-stat-flash: 0 0 0 3px rgba(13, 138, 134, 0.09);
  /* styles.css: the inbox stage's rising cards; its toasts 0 10px 22px -12px rgba(18,42,40,.32). */
  --shadow-inbox-card: 0 1px 2px rgba(18, 42, 40, 0.05), 0 8px 16px -10px rgba(18, 42, 40, 0.18), 0 26px 40px -26px rgba(18, 42, 40, 0.24);

  /* ── gradient ── */
  /* The one gradient that carries meaning is the primary button's; the rest are veils. */
  /* The primary button fill (the CTA pill, the modal's confirm); 1px rgba(255,255,255,.34) border. The white 13px bold label is 4.15:1 at the darker end and 3.1:1 at the top — a source pair that misses AA; kept exact, flagged. */
  --gradient-brand: linear-gradient(180deg, #12a29d 0%, #0a8b87 100%);
  /* Inline (.hv2, .hv8): the primary button on hover. */
  --gradient-brand-hover: linear-gradient(180deg, #19b3ad 0%, #0d9995 100%);
  /* Inline: the veil over the hero photo's left 36%, so the frosted cards read against it. */
  --gradient-hero-veil: linear-gradient(90deg, rgba(245,245,243,0.62) 0%, rgba(245,245,243,0.3) 64%, rgba(245,245,243,0) 100%);
  /* styles.css: the fade over the top of the inbox stage that dissolves the rising cards. */
  --gradient-inbox-fade: linear-gradient(180deg, #ffffff 18%, rgba(255,255,255,0) 100%);

  /* ── outline ── */
  /* Focus and selection are outlines and rings, not shadows. */
  /* Keyboard focus on every [data-action] control and the nav toggle: a solid color-brand outline, offset 2px (3px on the toggle, radius-focus). 5.2:1 on white, 4.7:1 on color-surface-band. */
  --focus-ring: 2px solid #0d7a72;
  /* The gap between a focused control and its ring. */
  --focus-offset: 2px;
  /* The pick card's selected state: an inset ring drawn as an absolute overlay at radius-card-sm, with the check disc in color-brand-deep. */
  --selected-ring: 2px solid #0d7a72;

  /* ── type — the families; the type scale is each system's (systems.yaml) ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Lato', system-ui, sans-serif;
  --font-hand: 'Caveat', cursive;

  /* ── motion ── */
  /* The pace of the site's two ambient animations as a multiple of the design's own timing: every CSS duration in the site's styles.css is the design's value divided by it, and its script.js reads it for its timers (SEC-013, `Sovereign`: 1.5x — "needs to catch eye quick"). */
  --motion: 1.5;
}