/*
 * Studio Hub — Design tokens (FROZEN).
 * Source of truth: docs/agent-briefs/design-brief.md §9 (machine-readable summary).
 * Names are binding; values are binding. Do not add or change tokens without updating the brief.
 *
 * Direction: disciplined indigo action colour, blue-neutral layered surfaces, navy text
 * (redesign action plan §5). Values below are WCAG-verified in the real component
 * combinations; see design brief §2.6 for the verified pairs.
 *
 * Companion tokens (--<token>-line-height / -weight / -letter-spacing) encode the brief's
 * per-token type settings so components can consume them as CSS variables.
 */

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --color-primary: #4f46e5; /* white label 6.29:1 — AA for button/active-nav text */
  --color-primary-strong: #3525cd; /* white label 9.14:1 — pressed/strong states, AA-enhanced */
  --color-primary-hover: #4338ca; /* white label 7.90:1 — hover step between primary and strong */
  --color-primary-pressed: #3525cd;
  --color-primary-soft: #e2dfff; /* primary emphasis background */
  --color-primary-ink: #0f0069; /* text on --color-primary-soft: 13.26:1 */

  --color-secondary: #674bb5; /* white label 6.46:1 */
  --color-secondary-soft: #e8ddff;
  --color-secondary-ink: #21005e; /* text on --color-secondary-soft: 13.22:1 */

  /* ── Semantic ──────────────────────────────────────────── */
  --color-success: #377256; /* kept from the previous release (4.81:1 on its soft) */
  --color-success-soft: #e1f0e8;
  --color-warning: #c58a2e; /* kept from the previous release */
  --color-warning-soft: #fbefd7;
  --color-error: #ba1a1a; /* white label 6.46:1 */
  --color-error-soft: #ffdad6;
  --color-error-ink: #93000a; /* text on --color-error-soft: 7.24:1 */
  --color-info: #3a6fb4; /* kept from the previous release */
  --color-info-soft: #dce7f4;

  /* ── Neutrals ──────────────────────────────────────────── */
  /* Blue-neutral scale. ink-200 is the strong boundary colour (#777587, 4.28:1 on
   * canvas) for input/control outlines; ink-100 is the decorative divider (#c7c4d8)
   * — never use it where a boundary must be perceivable. */
  --color-ink-900: #111c2d; /* primary text: 16.31:1 on canvas */
  --color-ink-700: #464555; /* muted text: 8.93:1 on canvas, ≥8.46:1 on raised */
  --color-ink-500: #5f5e6e; /* tertiary text: 6.04:1 on canvas, 5.73:1 on sunken */
  --color-ink-300: #a6a4b4; /* decorative icons/disabled text only (2.33:1) */
  --color-ink-200: #777587; /* strong outline: required control boundaries */
  --color-ink-100: #c7c4d8; /* decorative divider only (1.63:1 on canvas) */
  --color-ink-050: #f0f3ff; /* subtle tinted backgrounds */
  --color-surface: #f9f9ff; /* app canvas */
  --color-surface-raised: #ffffff; /* cards, fields, sheets, dialogs */
  --color-surface-sunken: #f0f3ff; /* calendar wells, grouped regions; text 15.45:1 */

  /* ── Time blocks (GH#152 §C, R8) ────────────────────────── */
  /* Same neutral family as the ink scale. The block treatment pairs ink-900
   * text on the fill (12.07:1) with a diagonal stripe overlay so blocks stay
   * distinct from the flat skipped treatment (ink-050) by pattern, not color
   * alone; the 1px outline boundary is 8.06:1 on the raised surface. */
  --color-block-fill: #d8d8e0;
  --color-block-stripe: #b6b6c4;
  --color-block-outline: #4f4f5c;

  /* ── Type ──────────────────────────────────────────────── */
  --font-sans:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', 'Noto Sans', 'Liberation Sans',
    Arial, sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --text-display: 2.25rem;
  --text-display-line-height: 1.15;
  --text-display-weight: 600;
  --text-display-letter-spacing: -0.01em;

  --text-h1: 1.75rem;
  --text-h1-line-height: 1.2;
  --text-h1-weight: 600;
  --text-h1-letter-spacing: -0.01em;

  --text-h2: 1.375rem;
  --text-h2-line-height: 1.25;
  --text-h2-weight: 600;
  --text-h2-letter-spacing: -0.005em;

  --text-h3: 1.125rem;
  --text-h3-line-height: 1.3;
  --text-h3-weight: 600;
  --text-h3-letter-spacing: 0;

  --text-body: 1rem;
  --text-body-line-height: 1.5;
  --text-body-weight: 400;
  --text-body-letter-spacing: 0;

  --text-body-strong: 1rem;
  --text-body-strong-line-height: 1.5;
  --text-body-strong-weight: 600;
  --text-body-strong-letter-spacing: 0;

  --text-small: 0.875rem;
  --text-small-line-height: 1.45;
  --text-small-weight: 400;
  --text-small-letter-spacing: 0;

  --text-caption: 0.75rem;
  --text-caption-line-height: 1.4;
  --text-caption-weight: 500;
  --text-caption-letter-spacing: 0.02em;

  --text-button: 1rem;
  --text-button-line-height: 1.2;
  --text-button-weight: 600;
  --text-button-letter-spacing: 0;

  /* ── Spacing (4pt grid) ────────────────────────────────── */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Radii ─────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* ── Elevation ─────────────────────────────────────────── */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(17, 28, 45, 0.06);
  --shadow-md: 0 2px 8px rgba(17, 28, 45, 0.08);
  --shadow-lg: 0 8px 24px rgba(17, 28, 45, 0.12);
  --shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.3);

  /* ── Containers ────────────────────────────────────────── */
  --container-mobile: 100%;
  --container-tablet: 100%;
  --container-desktop: 1200px;
  --container-wide: 1440px;
  --content-prose: 68ch;

  /* ── Z-index ───────────────────────────────────────────── */
  --z-base: 0;
  --z-sticky: 10;
  --z-nav: 100;
  --z-sheet: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
  --z-tooltip: 1300;

  /* ── Breakpoints (mirrors of design brief §4.5) ────────── */
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ── Motion ────────────────────────────────────────────── */
  --transition-fast: 120ms ease-out;
}

/* Desktop step-up (≥768px, design brief §3.2): h1 → 2rem, display → 2.75rem */
@media (min-width: 768px) {
  :root {
    --text-h1: 2rem;
    --text-display: 2.75rem;
  }
}