/* ============================================================
   Cortibase design tokens v1.0.0 — GENERATED by design-tokens/build.py
   from design-tokens.json. DO NOT EDIT BY HAND; edit the JSON.
   Load this ONE file on every page/app root. Never restate a
   color, font, radius or shadow locally — use var(--token).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {

  /* --- color.brand --- */
  --crimson: #D7475A;  /* Primary CTA / brand signal. One per view. */
  --crimson-hover: #BF3549;  /* Primary button hover. */
  --crimson-dark: #8F2235;  /* Crimson as TEXT on light surfaces; pressed state. */
  --crimson-soft: #F8E8EA;  /* Soft brand wells: eyebrow fill, icon wells, active nav, accent chips. */
  --crimson-soft-2: #F3D3D8;  /* Stronger soft tint (rare). */

  /* --- color.surface --- */
  --bg: #FBF8F4;  /* Marketing page background (warm paper). */
  --bg-alt: #FAF7F2;  /* Alternate band; table row hover. */
  --surface: #FFFFFF;  /* Cards, panels, sidebar. */
  --white: #FFFFFF;  /* Inputs (utility white). */
  --panel: #F2E8E1;  /* Beige panel card, neutral pill fill. */
  --panel-strong: #E7D6CD;  /* Stronger beige (rare). */

  /* --- color.ink --- */
  --ink: #0B0706;  /* Headlines, black button, inverse cards, dark bands, focus border. */
  --ink-2: #24120F;  /* Body text. */
  --ink-soft: #4A3A35;  /* Softer body. */
  --muted: #6B615C;  /* Graphite. Secondary text, marketing body copy, table headers, labels, resting nav. */
  --muted-2: #9B8E88;  /* Faint. Ticks, figure captions, footer, placeholders, disabled. ~3.3:1 on paper: never for text under 12px that must be read. */
  --border: #E2D2C9;  /* Default hairline. */
  --border-soft: #EDE1DA;  /* Softer divider. */

  /* --- color.semantic --- */
  --success: #596344;  /* Olive. aligned / healthy / published. */
  --success-bg: #E7EADF;
  --warning: #9B4E2F;  /* Rust. review / conflict / failed. The only 'bad' tone; there is no red error. */
  --warning-bg: #F3DDD5;
  --info: #5F6B7C;  /* Slate. monitor / steady / informational. */
  --info-bg: #E9EEF4;
  --success-border: rgba(89, 99, 68, 0.18);  /* Pill / alert-well border, success. */
  --warning-border: rgba(155, 78, 47, 0.18);
  --info-border: rgba(95, 107, 124, 0.18);
  --crimson-border: rgba(215, 71, 90, 0.18);  /* Soft-crimson well / avatar node border. */
  --crimson-border-strong: rgba(215, 71, 90, 0.24);  /* Eyebrow badge / accent chip border. */
  --ink-hover: #1C110F;  /* Black button hover. */

  /* --- color.onInk --- */
  --text-on-ink: #F6F1EC;  /* Headlines and leads on ink sections (warm off-white, not pure white). */
  --muted-on-ink: #A8A09A;  /* Body copy on ink. */
  --subtle-on-ink: #7A716B;  /* Eyebrows, captions, terminal dim text on ink. */
  --stroke-on-ink: #EFEAE4;  /* Diagram strokes on ink. */
  --terminal-bg: #120D0C;  /* Terminal / code panel on ink sections. */
  --success-on-ink: #8FBF9A;  /* Terminal OK lines. */
  --crimson-light: #E2687A;  /* Lit face of crimson diagram solids. */
  --crimson-deep: #A93044;  /* Shaded face of crimson diagram solids. */

  /* --- color.alias --- */
  --text-strong: var(--ink);
  --text-body: var(--ink-2);
  --text-muted: var(--muted);
  --text-subtle: var(--muted-2);
  --text-on-dark: var(--text-on-ink);
  --text-brand: var(--crimson-dark);
  --surface-page: #FFFFFF;  /* Product APP page background (pure white). Marketing uses {bg}. */
  --surface-inset: var(--bg);  /* Warm well inside white cards. */
  --surface-card: var(--surface);
  --surface-panel: var(--panel);
  --surface-input: var(--white);
  --surface-inverse: var(--ink);
  --border-default: var(--border);
  --border-divider: var(--border-soft);
  --border-strong: var(--ink);
  --action-primary: var(--crimson);
  --action-primary-hover: var(--crimson-hover);
  --action-primary-press: var(--crimson-dark);
  --action-inverse: var(--ink);
  --focus-ring: rgba(11, 7, 6, 0.08);  /* Focus is INK, never crimson. */
  --focus-border: var(--ink);

  /* --- font.family --- */
  --font-sans: "Manrope", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;  /* The one brand family: body, UI, headlines, eyebrows, labels, wordmark. */
  --font-display: var(--font-sans);  /* Alias of font-sans (Manrope). Kept so components can say 'display' for headlines; there is no second face. */
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;  /* System monospace. Terminal / code panels and namespaces ONLY. Eyebrows, labels and pills are Manrope uppercase with wide tracking, not mono. */

  /* --- font.weight --- */
  --fw-regular: 400;
  --fw-medium: 500;  /* Body copy. */
  --fw-semibold: 600;  /* Nav links, small labels, footer. */
  --fw-bold: 700;  /* Headlines, buttons, leads, eyebrows. */
  --fw-heavy: 800;  /* Wordmark, stat numbers, step labels, CTA-band headline. Manrope's maximum. */
  --fw-black: 800;  /* Alias of fw-heavy (Manrope tops out at 800). */

  /* --- font.size --- */
  --fs-display-2xl: clamp(2.7rem, 4.9vw, 4.15rem);  /* Marketing hero H1 (43–66px). */
  --fs-display-xl: clamp(2rem, 3.4vw, 2.9rem);  /* Section H2 on paper (pillars). */
  --fs-display-lg: clamp(1.9rem, 3.2vw, 2.7rem);  /* Section H2 on ink / most sections. */
  --fs-heading-xl: clamp(1.9rem, 3vw, 2.5rem);  /* Two-column section H2, CTA band H2. */
  --fs-heading-lg: 1.55rem;  /* Row / claim H3 (24.8px). */
  --fs-heading-md: 1.5rem;  /* Ruled-row H3 (24px). */
  --fs-heading-sm: clamp(1.5rem, 2.4vw, 2rem);  /* Compact band H2 (trust). */
  --fs-page-title: 44px;  /* App view H1. */
  --fs-stat: 40px;  /* App stat tile number. */
  --fs-stat-sm: 1.75rem;  /* Marketing inline stat (94%). */
  --fs-lead: 1.06rem;  /* Hero sub-copy. */
  --fs-body-lg: 1.04rem;  /* Pull quote. */
  --fs-body: 0.95rem;  /* Marketing body copy (15.2px). */
  --fs-body-app: 15px;  /* App body. */
  --fs-body-sm: 0.86rem;  /* Secondary copy, inbox text, nav links, logo-strip items (13.8px). */
  --fs-control: 14px;  /* App buttons, inputs. */
  --fs-cta: 0.92rem;  /* Marketing CTA button label. */
  --fs-spec: 0.72rem;  /* Eyebrows, scope keys, proof labels (11.5px). */
  --fs-caption: 0.68rem;  /* Figure captions, inbox/terminal headers, footer (10.9px). */
  --fs-tag: 0.66rem;  /* Persona tags, source labels (10.6px). */
  --fs-label: 11px;  /* App field labels. */
  --fs-mono-xs: 11px;  /* App meta. */
  --fs-mono-2xs: 10px;  /* App table headers, pills. */
  --fs-code: 0.78rem;  /* Terminal text. */

  /* --- font.lineHeight --- */
  --lh-display: 1.02;  /* Hero H1. */
  --lh-heading: 1.1;  /* Section H2 (1.1–1.12). */
  --lh-snug: 1.22;  /* H3. */
  --lh-body: 1.45;  /* App body. */
  --lh-relaxed: 1.55;  /* Dense marketing copy (inbox, stats). */
  --lh-loose: 1.7;  /* Marketing body and leads. */
  --lh-code: 1.9;  /* Terminal. */

  /* --- font.letterSpacing --- */
  --ls-display: -0.045em;  /* Hero H1. */
  --ls-heading: -0.035em;  /* Section H2 (−0.035 to −0.04em). */
  --ls-tight: -0.04em;  /* Stat numbers, pillars H2. */
  --ls-snug: -0.03em;  /* H3. */
  --ls-normal: -0.01em;  /* Buttons, leads, nav. */
  --ls-label: 0.02em;  /* App field labels, proof labels. */
  --ls-mono: 0.03em;  /* App table headers. */
  --ls-wide: 0.14em;  /* Persona tags, scope keys, source labels, inbox header (0.12–0.15em). */
  --ls-eyebrow: 0.16em;  /* Spec eyebrows, logo-strip labels (0.16–0.18em). */

  /* --- font.composite --- */
  --text-display: var(--fw-bold) var(--fs-display-2xl) / var(--lh-display) var(--font-display);
  --text-section: var(--fw-bold) var(--fs-display-lg) / var(--lh-heading) var(--font-display);
  --text-card-title: var(--fw-bold) var(--fs-heading-md) / var(--lh-snug) var(--font-display);
  --text-body-default: var(--fw-medium) var(--fs-body) / var(--lh-loose) var(--font-sans);
  --text-eyebrow: var(--fw-bold) var(--fs-spec) / 1 var(--font-sans);  /* Add text-transform: uppercase; letter-spacing: var(--ls-eyebrow). */
  --text-meta: var(--fw-bold) var(--fs-mono-xs) / 1.3 var(--font-sans);  /* App meta (Manrope, not mono). */
  --text-code: var(--fw-regular) var(--fs-code) / var(--lh-code) var(--font-mono);

  /* --- space.scale --- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* --- space.semantic --- */
  --gap-grid: 18px;  /* Card grids, stacked app blocks. */
  --gap-tight: 12px;  /* Button rows, chip rows. */
  --pad-card: 20px;
  --pad-panel: clamp(28px, 4vw, 52px);
  --pad-content: 28px;  /* App content area padding. */
  --section-gap: 82px;
  --section-gap-lg: clamp(34px, 5vw, 64px);

  /* --- layout --- */
  --container: min(1360px, calc(100% - 40px));
  --container-narrow: min(1080px, calc(100% - 40px));
  --frame-w: 1216px;  /* Marketing drafting frame width. */
  --sidebar-w: 248px;
  --control-h: 50px;
  --control-h-sm: 40px;
  --field-h: 48px;
  --well: 40px;  /* Icon well square. */
  --nav-h: 60px;  /* Marketing nav height. */
  --pad-cta: 0.82rem 1.5rem;  /* Marketing CTA button padding (~44px tall). */
  --pad-section: 6.2rem 3.5rem 5.6rem;  /* Marketing section frame padding (desktop). */
  --pad-section-x-mobile: 1.5rem;
  --bp-mobile: 900px;  /* Single-column breakpoint (use in @media, cannot be var()-ed; keep in sync manually). */
  --bp-phone: 480px;  /* Phone tweaks (steps to one column, shorter canvases). */

  /* --- radius --- */
  --r-pill: 999px;  /* Pills, chips, badges — the ONLY round elements. */
  --r-section: 0px;
  --r-card: 0px;
  --r-control: 0px;
  --r-button: 0px;
  --r-button-sm: 0px;
  --r-well: 0px;
  --r-tile: 8px;  /* Tolerated only on tiny internal tiles (table avatar node). */

  /* --- shadow --- */
  --shadow-sm: 0 8px 24px rgba(11, 7, 6, 0.06);
  --shadow-md: 0 16px 42px rgba(11, 7, 6, 0.08);
  --shadow-lg: 0 24px 70px rgba(11, 7, 6, 0.10);
  --shadow-xl: 0 34px 100px rgba(11, 7, 6, 0.24);
  --shadow-crimson: 0 14px 30px rgba(215, 71, 90, 0.16);
  --shadow-ink: 0 14px 30px rgba(11, 7, 6, 0.14);
  --ring-focus: 0 0 0 4px rgba(11, 7, 6, 0.08);  /* Ink focus ring. */
  --ring-brand: 0 0 0 5px rgba(215, 71, 90, 0.11);  /* Eyebrow dot glow only. */

  /* --- hairline --- */
  --hair: rgba(11, 7, 6, 0.12);  /* Marketing frame rails on paper. */
  --hair-dash: rgba(11, 7, 6, 0.18);  /* Dashed rules on paper. */
  --hair-on-ink: rgba(255, 255, 255, 0.13);
  --hair-dash-on-ink: rgba(255, 255, 255, 0.20);
  --ghost-border: rgba(255, 255, 255, 0.28);  /* Ghost button border on ink. */
  --on-dark-border: rgba(255, 255, 255, 0.14);  /* Badge / terminal border on ink. */
  --on-dark-border-strong: rgba(255, 255, 255, 0.22);  /* Chip border on ink. */
  --rails-on-crimson: rgba(255, 255, 255, 0.18);  /* Frame rails inside the crimson CTA band. */
  --text-on-crimson-muted: rgba(255, 255, 255, 0.75);  /* Small line under the CTA-band headline. */
  --on-dark-fill: rgba(255, 255, 255, 0.04);  /* Badge fill on ink. */
  --text-on-ink-muted: rgba(255, 253, 249, 0.70);  /* Paragraphs on ink. */
  --nav-glass: rgba(251, 248, 244, 0.85);  /* Frosted marketing nav. */
  --topbar-glass: rgba(255, 255, 255, 0.85);  /* Frosted app topbar. */
  --backdrop: rgba(11, 7, 6, 0.32);  /* Modal backdrop. */

  /* --- motion --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);  /* Marketing reveal-on-scroll. */
  --dur-fast: 160ms;
  --dur-reveal: 800ms;
  --dur-draw: 1600ms;  /* Diagram stroke draw-in. */
  --dur-marquee: 34s;  /* Logo strip loop. */
  --transition-control: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

html { color-scheme: light; }