/*
 * Inline Design System — CSS custom properties
 *
 * Drop this at the top of your global stylesheet. Consume via var(--inline-*).
 * Source of truth: design-system/tokens/tokens.json
 */

@font-face {
  font-family: "Geist Inline";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono Inline";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}

@font-face {
  font-family: "Sora Inline";
  src:
    url("../fonts/Sora-Variable.woff2") format("woff2 supports variations"),
    url("../fonts/Sora-Variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 750;
  font-display: block;
}

:root {
  /* ── Brand / Butter Yellow ─────────────────────────── */
  --inline-brand-50: #fdfbf2;
  --inline-brand-100: #fbf5dc;
  --inline-brand-200: #f7eab4;
  --inline-brand-300: #f2dd8d;
  --inline-brand-400: #eed273;
  --inline-brand-500: #e9cb62;
  --inline-brand-600: #c9a83f;
  --inline-brand-700: #9d7e27;
  --inline-brand-800: #735a1e;
  --inline-brand-900: #4c3a17;
  --inline-brand-950: #2a200d;

  /* ── Feedback taxonomy ─────────────────────────────── */
  --inline-feedback-argument: #515197;
  --inline-feedback-evidence: #735900;
  --inline-feedback-reasoning: #2f5a8f;
  --inline-feedback-clarity: #016770;
  --inline-feedback-strength: #416a33;

  /* ── Brainstorming taxonomy ────────────────────────── */
  --inline-brainstorm-understand: #9b3f38;
  --inline-brainstorm-explore: #704776;
  --inline-brainstorm-focus: #955015;
  --inline-brainstorm-gather: #4f5873;
  --inline-brainstorm-connect: #2c6663;
  --inline-brainstorm-challenge: #873e63;
  --inline-brainstorm-next-step: #536931;

  /* ── Ink / neutral ─────────────────────────────────── */
  --inline-ink-50: #f6f6f3;
  --inline-ink-100: #eceef1;
  --inline-ink-200: #d8dce3;
  --inline-ink-300: #bac0cc;
  --inline-ink-400: #929baa;
  --inline-ink-500: #707b8d;
  --inline-ink-600: #536075;
  --inline-ink-700: #39465f;
  --inline-ink-800: #26324d;
  --inline-ink-900: #18213b;
  --inline-ink-950: #0c1224;

  /* ── Surfaces ──────────────────────────────────────── */
  --inline-paper: #f6f6f3;
  --inline-surface: #ffffff;
  --inline-line: #dfe0e2;
  --inline-line-soft: #ecedea;
  --inline-border-strong: #707b8d;

  /* ── Semantic ──────────────────────────────────────── */
  --inline-success-100: #e9f4ee;
  --inline-success-200: #c3e1d2;
  --inline-success-600: #2d634b;
  --inline-success-800: #00452e;
  --inline-warn-100: #f7f0e7;
  --inline-warn-200: #ead5be;
  --inline-warn-600: #855715;
  --inline-warn-800: #513100;
  --inline-danger-100: #faedee;
  --inline-danger-200: #f1cfd2;
  --inline-danger-600: #992f45;
  --inline-danger-800: #621D2B;
  --inline-info-100: #e9f3fa;
  --inline-info-200: #c3ddf0;
  --inline-info-600: #345b76;
  --inline-info-800: #063d5c;

  /* ── Alpha ─────────────────────────────────────────── */
  --inline-ink-a04: rgb(24 33 59 / 0.04);
  --inline-ink-a08: rgb(24 33 59 / 0.08);
  --inline-ink-a16: rgb(24 33 59 / 0.16);
  --inline-ink-a32: rgb(24 33 59 / 0.32);
  --inline-ink-a64: rgb(24 33 59 / 0.64);
  --inline-brand-a52: rgb(233 203 98 / 0.52);
  --inline-brand-strong-a64: rgb(201 168 63 / 0.64);
  --inline-paper-a72: rgb(246 246 243 / 0.72);
  --inline-paper-a88: rgb(246 246 243 / 0.88);

  /* ── Semantic aliases ──────────────────────────────── */
  --inline-text-primary: var(--inline-ink-900);
  --inline-text-secondary: var(--inline-ink-600);
  --inline-text-tertiary: var(--inline-ink-500);
  --inline-text-disabled: var(--inline-ink-400);
  --inline-text-inverse: var(--inline-paper);
  --inline-text-link: var(--inline-ink-900);
  --inline-text-link-hover: var(--inline-brand-800);
  --inline-text-on-primary: var(--inline-paper);
  --inline-text-on-danger: var(--inline-surface);

  --inline-bg-canvas: var(--inline-paper);
  --inline-bg-surface: var(--inline-surface);
  --inline-bg-subtle: var(--inline-ink-50);
  --inline-bg-muted: var(--inline-ink-100);
  --inline-bg-inverse: var(--inline-ink-900);
  --inline-bg-brand-subtle: var(--inline-brand-100);
  --inline-bg-selected: var(--inline-brand-200);
  --inline-bg-overlay: var(--inline-ink-a32);

  --inline-border-default: var(--inline-line);
  --inline-border-subtle: var(--inline-line-soft);
  --inline-border-focus: var(--inline-brand-700);
  --inline-border-selected: var(--inline-brand-700);
  --inline-border-danger: var(--inline-danger-600);

  --inline-action-primary: var(--inline-ink-900);
  --inline-action-primary-hover: var(--inline-ink-800);
  --inline-action-primary-active: var(--inline-ink-950);
  --inline-action-primary-disabled: var(--inline-ink-200);
  --inline-action-primary-text: var(--inline-paper);
  --inline-focus-ring: var(--inline-brand-700);
  --inline-selection-bg: var(--inline-brand-a52);
  --inline-selection-bg-on-mark: var(--inline-brand-strong-a64);
  --inline-selection-border: var(--inline-brand-700);

  /* Feedback cards stay neutral; color identifies the dimension title only. */
  --inline-feedback-passage: var(--inline-brand-100);
  --inline-feedback-passage-active: var(--inline-brand-200);
  --inline-feedback-passage-boundary: var(--inline-brand-700);
  --inline-feedback-card: var(--inline-surface);
  --inline-feedback-card-border: var(--inline-line);
  --inline-feedback-card-border-hover: var(--inline-ink-300);
  --inline-feedback-card-border-active: var(--inline-ink-400);
  --inline-feedback-title-argument: var(--inline-feedback-argument);
  --inline-feedback-title-evidence: var(--inline-feedback-evidence);
  --inline-feedback-title-reasoning: var(--inline-feedback-reasoning);
  --inline-feedback-title-clarity: var(--inline-feedback-clarity);
  --inline-feedback-title-strength: var(--inline-feedback-strength);

  --inline-brainstorm-card: var(--inline-surface);
  --inline-brainstorm-card-border: var(--inline-line);
  --inline-brainstorm-title-understand: var(--inline-brainstorm-understand);
  --inline-brainstorm-title-explore: var(--inline-brainstorm-explore);
  --inline-brainstorm-title-focus: var(--inline-brainstorm-focus);
  --inline-brainstorm-title-gather: var(--inline-brainstorm-gather);
  --inline-brainstorm-title-connect: var(--inline-brainstorm-connect);
  --inline-brainstorm-title-challenge: var(--inline-brainstorm-challenge);
  --inline-brainstorm-title-next-step: var(--inline-brainstorm-next-step);

  /* ── Type ──────────────────────────────────────────── */
  --inline-font-sans:
    "Geist Inline", Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;
  --inline-font-mono:
    "Geist Mono Inline", "Geist Mono", ui-monospace, SFMono-Regular, Menlo,
    Consolas, monospace;
  --inline-font-logo: "Sora Inline", Sora, sans-serif;

  --inline-weight-regular: 400;
  --inline-weight-medium: 500;
  --inline-weight-semibold: 600;
  --inline-weight-logo: 750;

  --inline-type-display-xl: clamp(2.625rem, 1.95rem + 3vw, 4rem);
  --inline-type-display-lg: clamp(2.375rem, 1.94rem + 1.95vw, 3.25rem);
  --inline-type-display: clamp(2.125rem, 1.94rem + 0.83vw, 2.5rem);
  --inline-leading-display-xl: clamp(2.875rem, 2.22rem + 2.9vw, 4.1875rem);
  --inline-leading-display-lg: clamp(2.625rem, 2.19rem + 1.95vw, 3.5rem);
  --inline-leading-display: clamp(2.4375rem, 2.25rem + 0.83vw, 2.8125rem);
  --inline-type-h1: 2rem;
  --inline-type-h2: 1.625rem;
  --inline-type-h3: 1.25rem;
  --inline-type-h4: 1.0625rem;
  --inline-type-body-lg: 1.125rem;
  --inline-type-prose: 1.0625rem;
  --inline-type-body-md: 0.9375rem;
  --inline-type-body-sm: 0.8125rem;
  --inline-type-label: 0.8125rem;
  --inline-type-caption: 0.75rem;
  --inline-type-overline: 0.6875rem;
  --inline-type-code: 0.8125rem;

  /* ── Spacing (4px base) ────────────────────────────── */
  --inline-space-0: 0px;
  --inline-space-0_5: 2px;
  --inline-space-1: 4px;
  --inline-space-1_5: 6px;
  --inline-space-2: 8px;
  --inline-space-3: 12px;
  --inline-space-4: 16px;
  --inline-space-5: 20px;
  --inline-space-6: 24px;
  --inline-space-7: 28px;
  --inline-space-8: 32px;
  --inline-space-10: 40px;
  --inline-space-12: 48px;
  --inline-space-16: 64px;
  --inline-space-20: 80px;
  --inline-space-24: 96px;
  --inline-space-32: 128px;
  --inline-space-40: 160px;

  /* ── Semantic spacing ───────────────────────────────── */
  --inline-space-inline-xs: var(--inline-space-1);
  --inline-space-inline-sm: var(--inline-space-2);
  --inline-space-inline-md: var(--inline-space-3);
  --inline-space-stack-xs: var(--inline-space-2);
  --inline-space-stack-sm: var(--inline-space-3);
  --inline-space-stack-md: var(--inline-space-4);
  --inline-space-stack-lg: var(--inline-space-6);
  --inline-space-inset-sm: var(--inline-space-4);
  --inline-space-inset-md: var(--inline-space-6);
  --inline-space-inset-lg: var(--inline-space-8);
  --inline-space-page-gutter-mobile: var(--inline-space-4);
  --inline-space-page-gutter-desktop: var(--inline-space-6);
  --inline-space-section-product: var(--inline-space-16);
  --inline-space-section-marketing: var(--inline-space-24);
  --inline-space-workspace-gap: var(--inline-space-6);

  /* ── Control sizing ─────────────────────────────────── */
  --inline-control-height-sm: 32px;
  --inline-control-height-md: 40px;
  --inline-control-height-lg: 44px;
  --inline-control-target-min: 44px;
  --inline-control-selection-visual: 20px;
  --inline-control-switch-width: 40px;
  --inline-control-switch-height: 24px;

  /* ── Supporting sizes ───────────────────────────────── */
  --inline-icon-weight: regular;
  --inline-icon-size-xs: 12px;
  --inline-icon-size-sm: 16px;
  --inline-icon-size-md: 20px;
  --inline-icon-size-lg: 24px;
  --inline-avatar-size-xs: 16px;
  --inline-avatar-size-sm: 24px;
  --inline-avatar-size-md: 32px;
  --inline-avatar-size-lg: 40px;
  --inline-avatar-size-xl: 64px;
  --inline-chip-height-sm: 24px;
  --inline-chip-height-md: 32px;
  --inline-toolbar-height-compact: 48px;
  --inline-toolbar-height-app: 64px;

  /* ── Chart roles (charts only, never UI chrome) ─────── */
  --inline-chart-1: #3f529c; /* indigo */
  --inline-chart-2: #8e7000; /* ochre */
  --inline-chart-3: #008776; /* teal */
  --inline-chart-4: #90382d; /* rust */
  --inline-chart-5: var(--inline-ink-300); /* deprecated 0.15.0: charts cap at four series */
  --inline-chart-6: #90382d; /* deprecated 0.15.0: charts cap at four series */
  --inline-chart-emphasis: var(--inline-brand-500);
  --inline-chart-neutral: var(--inline-ink-300);
  --inline-chart-grid: var(--inline-line-soft);
  --inline-chart-axis-text: var(--inline-ink-500);

  /* ── Border widths ──────────────────────────────────── */
  --inline-border-w-none: 0px;
  --inline-border-w-hairline: 1px;
  --inline-border-w-emphasis: 2px;

  /* ── Stacking ───────────────────────────────────────── */
  --inline-z-base: 0;
  --inline-z-raised: 10;
  --inline-z-sticky: 20;
  --inline-z-overlay: 30;
  --inline-z-toast: 40;
  --inline-z-backdrop: 50;
  --inline-z-dialog: 60;

  /* ── Border radius ──────────────────────────────────── */
  --inline-radius-none: 0px;
  --inline-radius-xs: 2px;
  --inline-radius-sm: 4px;
  --inline-radius-md: 8px;
  --inline-radius-lg: 12px;
  --inline-radius-full: 9999px;

  /* ── Elevation and shadow ───────────────────────────── */
  --inline-shadow-none: none;
  --inline-shadow-raised: 0 1px 2px 0 rgb(24 33 59 / 0.06);
  --inline-shadow-overlay:
    0 8px 24px -4px rgb(24 33 59 / 0.12),
    0 2px 6px 0 rgb(24 33 59 / 0.06);
  --inline-shadow-dialog:
    0 24px 64px -12px rgb(12 18 36 / 0.18),
    0 6px 18px -4px rgb(12 18 36 / 0.08);

  /* ── Draft workspace ────────────────────────────────── */
  --inline-workspace-min-height: 460px;
  --inline-workspace-viewport-offset: 304px;
  --inline-compose-rail: 248px;
  --inline-workspace-question-rail-min: 320px;
  --inline-workspace-question-rail-max: 400px;
  --inline-workspace-draft-fr: 2fr;
  --inline-workspace-question-rail-fr: 1fr;

  /* ── Motion ────────────────────────────────────────── */
  --inline-dur-xs: 80ms;
  --inline-dur-sm: 160ms;
  --inline-dur-md: 240ms;
  --inline-dur-lg: 480ms;
  --inline-dur-xl: 720ms;

  --inline-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --inline-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --inline-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --inline-ease-linear: linear;

  /* ── Container ─────────────────────────────────────── */
  --inline-container-max: 1200px;
  --inline-container-band: 1120px;
  --inline-container-workbench: 920px;
  --inline-container-reading: 680px;
  --inline-container-narrow: 400px;
  --inline-gutter-mobile: 16px;
  --inline-gutter-desktop: 24px;

  /* ── Breakpoint metadata ────────────────────────────── */
  --inline-breakpoint-sm: 640px;
  --inline-breakpoint-md: 768px;
  --inline-breakpoint-lg: 1024px;
  --inline-breakpoint-xl: 1280px;
  --inline-breakpoint-2xl: 1536px;
}

/* ── Base ─────────────────────────────────────────────── */
html {
  font-size: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--inline-font-sans);
  color: var(--inline-text-primary);
  background: var(--inline-bg-canvas);
  font-size: var(--inline-type-body-md);
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  color: inherit;
  background: var(--inline-selection-bg);
  text-shadow: none;
}

/* ── Type utility classes ─────────────────────────────── */
.display-xl {
  font-size: var(--inline-type-display-xl);
  line-height: var(--inline-leading-display-xl);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.display-lg {
  font-size: var(--inline-type-display-lg);
  line-height: var(--inline-leading-display-lg);
  font-weight: 600;
  letter-spacing: -0.025em;
}
.display {
  font-size: var(--inline-type-display);
  line-height: var(--inline-leading-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.h1 {
  font-size: var(--inline-type-h1);
  line-height: 1.188;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.h2 {
  font-size: var(--inline-type-h2);
  line-height: 1.269;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.h3 {
  font-size: var(--inline-type-h3);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.h4 {
  font-size: var(--inline-type-h4);
  line-height: 1.412;
  font-weight: 500;
  letter-spacing: 0;
}
.body-lg {
  font-size: var(--inline-type-body-lg);
  line-height: 1.667;
  font-weight: 400;
}
.prose {
  max-width: 72ch;
  font-size: var(--inline-type-prose);
  line-height: 1.765;
  font-weight: 400;
}
.body-md {
  font-size: var(--inline-type-body-md);
  line-height: 1.6;
  font-weight: 400;
}
.body-sm {
  font-size: var(--inline-type-body-sm);
  line-height: 1.538;
  font-weight: 400;
}
.label {
  font-size: var(--inline-type-label);
  line-height: 1.231;
  font-weight: 500;
}
.caption {
  font-size: var(--inline-type-caption);
  line-height: 1.417;
  font-weight: 400;
}
.overline {
  font-size: var(--inline-type-overline);
  line-height: 1.273;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.code {
  font-family: var(--inline-font-mono);
  font-size: var(--inline-type-code);
  line-height: 1.538;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.passage-highlight,
mark {
  color: inherit;
  background: var(--inline-feedback-passage);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.passage-highlight::selection,
mark::selection {
  background: var(--inline-selection-bg-on-mark);
}

.passage-highlight.is-active,
.passage-link {
  color: inherit;
  background: var(--inline-feedback-passage-active);
  box-shadow: inset 0 -2px 0 var(--inline-feedback-passage-boundary);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.passage-highlight.is-active::selection,
.passage-link::selection {
  background: var(--inline-selection-bg-on-mark);
}

/* ── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}