@charset "UTF-8";
@import 'https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap';
:root, :root[data-theme=glass] {
  color-scheme: light dark;
  /* Surfaces — frosted translucent / blue-black void */
  --paper: light-dark(#F4EEFF, #0A0F1A);
  --paper-raised: light-dark(#FFF, #141E32);
  --paper-sunk: light-dark(#E8E0F5, #050810);
  --paper-glass: light-dark(rgba(255, 255, 255, 0.55), rgba(20, 30, 50, 0.60));
  /* Ink — warm near-black / cool near-white */
  --ink: light-dark(#1D1D1F, #F0F4FF);
  --ink-soft: light-dark(#3A3A3C, #C8CFE0);
  --ink-faint: light-dark(#65656A, #8A92A8);
  --graphite: light-dark(#2C2C2E, #DCE2F0);
  --muted: light-dark(#6E6E73, #727b93);
  /* Construction lines — translucent */
  --guide: light-dark(rgba(29, 29, 31, 0.14), rgba(240, 244, 255, 0.16));
  --guide-soft: light-dark(rgba(29, 29, 31, 0.10), rgba(240, 244, 255, 0.08));
  --hair: light-dark(rgba(29, 29, 31, 0.08), rgba(240, 244, 255, 0.12));
  --hair-soft: light-dark(rgba(29, 29, 31, 0.04), rgba(240, 244, 255, 0.06));
  /* Primary accent — iOS indigo / vibrant dark blue */
  --ai: light-dark(#5653de, #6FA9FF);
  --ai-ink: light-dark(#3634A3, #93C2FF);
  --ai-wash: light-dark(rgba(89, 87, 226, 0.12), rgba(111, 169, 255, 0.16));
  /* Seal — iOS system pink */
  --shu: light-dark(#f32856, #FF6B8A);
  --shu-wash: light-dark(rgba(255, 55, 95, 0.12), rgba(255, 107, 138, 0.16));
  /* Draft / marginalia — iOS orange */
  --ochre: light-dark(#FF9500, #FFC56B);
  --ochre-wash: light-dark(rgba(255, 149, 0, 0.14), rgba(255, 197, 107, 0.16));
  /* Code surface */
  --code-bg: light-dark(rgba(29, 29, 31, 0.82), rgba(5, 8, 16, 0.82));
  --code-ink: light-dark(#F5F5F7, #F0F4FF);
  --code-muted: light-dark(#BCBCC0, #8A92A8);
  --code-accent: #FFD60A;
  --code-green: light-dark(#3ad85e, #5FE37F);
  --code-blue: light-dark(#64D2FF, #93C2FF);
  /* Typography — SF stack, identical */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  --font-script: 'Caveat', 'Shadows Into Light', cursive;
  --font-serif: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
  /* Radius — soft and large, identical */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 24px;
  /* Shadows — floaty with cool-blue undertone / deep dark drops */
  --shadow-sm: 0 2px 10px light-dark(rgba(31, 38, 135, 0.06), rgba(0, 0, 0, 0.30));
  --shadow-md: 0 8px 32px light-dark(rgba(31, 38, 135, 0.10), rgba(0, 0, 0, 0.42));
  --shadow-lg: 0 24px 60px light-dark(rgba(31, 38, 135, 0.14), rgba(0, 0, 0, 0.55));
  --shadow-xl: 0 40px 80px light-dark(rgba(31, 38, 135, 0.18), rgba(0, 0, 0, 0.65));
  --shadow-2xl: 0 56px 112px light-dark(rgba(31, 38, 135, 0.24), rgba(0, 0, 0, 0.75));
  /* Blur — LIGHT defaults; dark overrides below via nested @media */
  --blur-sm: blur(14px) saturate(160%);
  --blur-md: blur(22px) saturate(170%);
  --blur-lg: blur(30px) saturate(180%);
  /* Glow — dual-inset rim highlight (LIGHT defaults; dark overrides below) */
  --glow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.70);
  --glow-md:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(255, 255, 255, 0.20),
    inset 1px 0 0 rgba(255, 255, 255, 0.35),
    inset -1px 0 0 rgba(255, 255, 255, 0.20);
  --glow-lg:
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 0 rgba(255, 255, 255, 0.25),
    inset 2px 0 0 rgba(255, 255, 255, 0.45),
    inset -2px 0 0 rgba(255, 255, 255, 0.25),
    inset 0 0 40px rgba(255, 255, 255, 0.15);
  /* Motion — identical */
  --duration-fast: 180ms;
  --duration-normal: 240ms;
  --duration-slow: 380ms;
  --ease: cubic-bezier(0.33, 0.66, 0.33, 1);
  /* ---- Pattern C: dark-mode overrides for NON-COLOR tokens ----
   * stylelint can't trace through @include m.theme() to know the
   * parent selector is :root[data-theme="glass"]; the declarations
   * below are valid in compiled output (Sass hoists @media + scopes
   * the vars under the parent selector). */
  /* stylelint-disable no-invalid-position-declaration -- see comment above */

  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
  --page-hero-bg: light-dark(#ebe5fd, #101828);
  --page-hero-ink: light-dark(#1d1d1f, #f0f4ff);
  --page-band-bg: light-dark(#eee9fe, #0e1422);
  --page-band-ink: light-dark(#1d1d1f, #f0f4ff);
}
@media (prefers-color-scheme: dark) {
  :root, :root[data-theme=glass] {
    --blur-sm: blur(12px) saturate(160%);
    --blur-md: blur(18px) saturate(180%);
    --blur-lg: blur(20px) saturate(200%);
    --glow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    --glow-md:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(255, 255, 255, 0.06),
      inset 1px 0 0 rgba(255, 255, 255, 0.10),
      inset -1px 0 0 rgba(255, 255, 255, 0.06);
    --glow-lg:
      inset 0 2px 0 rgba(255, 255, 255, 0.28),
      inset 0 -2px 0 rgba(255, 255, 255, 0.08),
      inset 2px 0 0 rgba(255, 255, 255, 0.14),
      inset -2px 0 0 rgba(255, 255, 255, 0.08),
      inset 0 0 40px rgba(111, 169, 255, 0.08);
  }
}
:root, :root[data-theme=glass] {
  /* stylelint-enable no-invalid-position-declaration */
  /* Semantic aliases */
  --background-default: var(--paper);
  --background-subtle: var(--paper-sunk);
  --background-navbar: var(--paper-raised);
  --surface-default: var(--paper);
  --surface-raised: var(--paper-raised);
  --surface-sunk: var(--paper-sunk);
  --surface-muted: var(--paper-sunk);
  --surface-subtle: var(--paper-raised);
  --surface-emphasis: var(--ink);
  --surface-glass: var(--paper-glass);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted: var(--ink-faint);
  --text-tertiary: var(--muted);
  --text-inverse: var(--paper);
  --text-link: var(--ai);
  --text-link-hover: var(--ai-ink);
  --border-default: var(--hair);
  --border-subtle: var(--hair-soft);
  --border-emphasis: var(--ink);
  --border-focus: var(--ai);
  --interactive-hover: light-dark(rgba(29, 29, 31, 0.04), rgba(240, 244, 255, 0.05));
  --interactive-active: light-dark(rgba(29, 29, 31, 0.08), rgba(240, 244, 255, 0.10));
  --brand-primary: var(--ai);
  --brand-primary-hover: var(--ai-ink);
  --action-primary-default: var(--ai);
  --action-primary-hover: var(--ai-ink);
  --action-primary-active: var(--ai-ink);
  --action-primary-wash: var(--ai-wash);
  --action-secondary-default: var(--shu);
  --action-secondary-hover: var(--shu);
  --action-secondary-active: var(--shu);
  --action-secondary-wash: var(--shu-wash);
  --action-tertiary-default: var(--ochre);
  --action-tertiary-hover: var(--ochre);
  --action-tertiary-active: var(--ochre);
  --action-tertiary-wash: var(--ochre-wash);
  --feedback-info: var(--ai);
  --feedback-success: var(--code-green);
  --feedback-warning: var(--ochre);
  --feedback-error: var(--shu);
  --info-default: var(--ai);
  --info-subtle: light-dark(rgba(89, 87, 226, 0.12), rgba(111, 169, 255, 0.16));
  --info-text: var(--ai-ink);
  --success-default: light-dark(#34C759, #30D158);
  --success-subtle: light-dark(rgba(52, 199, 89, 0.12), rgba(48, 209, 88, 0.16));
  --success-text: light-dark(#0F6A22, #5FE37F);
  --warning-default: var(--ochre);
  --warning-subtle: var(--ochre-wash);
  --warning-text: light-dark(#985000, #FFD79A);
  --error-default: var(--shu);
  --error-subtle: var(--shu-wash);
  --error-text: light-dark(#A3193A, #FF93AB);
  /* Library scales — identical */
  /* Spacing rhythm — THE knob for how dense or airy this theme feels.
     The numbered scale is the source of truth: every component reads
     var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
     are emitted by the library as references to these, so they follow
     automatically. Change a value here and the whole page re-proportions.
     Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
  --space-unit: 0.125rem;
  --space-0: 0;
  --space-1: calc(var(--space-unit) * 4);
  --space-2: calc(var(--space-unit) * 6);
  --space-3: calc(var(--space-unit) * 7);
  --space-4: calc(var(--space-unit) * 8);
  --space-5: calc(var(--space-unit) * 12);
  --space-6: calc(var(--space-unit) * 16);
  --space-7: calc(var(--space-unit) * 24);
  --space-8: calc(var(--space-unit) * 32);
  --space-9: calc(var(--space-unit) * 48);
  --space-2xs: calc(var(--space-unit) * 2);
  /* T-shirt aliases - var() references into this theme's numbered scale,
     so re-tuning a numbered step re-tunes its alias automatically. */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-5);
  --space-xl: var(--space-6);
  --space-2xl: var(--space-7);
  --space-3xl: var(--space-8);
  --space-4xl: var(--space-9);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: 0.75rem;
  --radius-full: 9999px;
  --font-primary: var(--font-sans);
  --font-size-base: 1rem;
  --line-height-normal: 1.5;
  --font-weight-medium: 500;
  --z-sticky: 1020;
  --z-dropdown: 1030;
  --z-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}