/* ─────────────────────────────────────────────────────────────────
   Paper — editorial atelier (warm cream + ink + ochre)
   The default. Quiet, type-led, slightly grainy.
   ───────────────────────────────────────────────────────────────── */

html[data-theme="paper"] {
  --color-background: oklch(96.5% 0.012 80);
  --color-foreground: oklch(20% 0.018 60);
  --color-card: oklch(98.2% 0.008 80);
  --color-card-foreground: oklch(20% 0.018 60);
  --color-popover: oklch(98.5% 0.006 80);
  --color-popover-foreground: oklch(20% 0.018 60);
  --color-primary: oklch(45% 0.13 35);
  --color-primary-foreground: oklch(98% 0.005 90);
  --color-secondary: oklch(92% 0.014 80);
  --color-secondary-foreground: oklch(25% 0.02 60);
  --color-muted: oklch(93% 0.012 80);
  --color-muted-foreground: oklch(46% 0.018 60);
  --color-accent: oklch(82% 0.085 60);
  --color-accent-foreground: oklch(22% 0.04 35);
  --color-destructive: oklch(54% 0.18 25);
  --color-destructive-foreground: oklch(98% 0.005 90);
  --color-border: oklch(85% 0.014 75);
  --color-input: oklch(85% 0.014 75);
  --color-ring: oklch(45% 0.13 35 / 0.45);

  --radius-sm: 0.0625rem;
  --radius-md: 0.1875rem;
  --radius-lg: 0.3125rem;
  --radius-xl: 0.5rem;

  --font-sans:
    "Geist", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
  --font-display: "Fraunces", "Newsreader", ui-serif, Georgia, serif;
  --font-serif: "Fraunces", "Newsreader", ui-serif, Georgia, serif;
  --font-mono:
    "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Surfaces — subtle 3-tier layering */
  --surface-page: var(--color-background);
  --surface-rail: oklch(94.5% 0.014 80);
  --surface-inset: oklch(91.5% 0.018 80);
  --surface-elevated: var(--color-card);
  --surface-dialog: oklch(98.5% 0.006 80);
  --surface-player: color-mix(in oklab, var(--color-primary) 8%, transparent);

  /* Legacy aliases */
  --surface-app: var(--surface-page);
  --surface-panel: var(--surface-rail);
  --surface-panel-strong: var(--surface-elevated);
  --surface-empty: color-mix(
    in oklab,
    var(--color-card) 88%,
    var(--color-background)
  );
  --border-subtle: color-mix(in oklab, var(--color-border) 65%, transparent);

  /* Rules — thin warm ink */
  --rule-color: oklch(82% 0.018 75);
  --rule-strong-color: oklch(35% 0.024 60);
  --rule-style: solid;

  /* Marker accents */
  --accent-primary: oklch(45% 0.13 35);
  --accent-secondary: oklch(38% 0.08 220);
  --accent-warning: oklch(65% 0.14 75);
  --accent-danger: oklch(54% 0.18 25);
  --accent-success: oklch(48% 0.11 145);

  /* Ambience — warm radial wash + paper grain */
  --ambience-image:
    radial-gradient(
      ellipse at 80% -10%,
      oklch(82% 0.085 60 / 0.18),
      transparent 60%
    ),
    radial-gradient(
      ellipse at -10% 110%,
      oklch(85% 0.05 220 / 0.12),
      transparent 55%
    );
  --noise-opacity: 0.04;

  --radius-card: 0.1875rem;
  --radius-control: 0.125rem;
  --radius-dialog: 0.25rem;
  --radius-chip: 999px;

  --panel-header-height: 2.875rem;
  --panel-section-padding-x: 1rem;
  --panel-section-padding-y: 0.875rem;
  --composer-max-width: 56rem;
  --session-column-max-width: 56rem;

  --eyebrow-font-family: var(--font-mono);
  --eyebrow-font-size: 0.6875rem;
  --eyebrow-font-weight: 500;
  --eyebrow-letter-spacing: 0.18em;
  --eyebrow-text-transform: uppercase;

  --title-font-family: var(--font-display);
  --title-font-style: normal;
  --title-font-weight: 600;
  --title-letter-spacing: -0.01em;
  --title-text-transform: none;

  --story-font-family: var(--font-display);
  --story-font-size: 1rem;
  --story-line-height: 1.78;
  --story-font-weight: 400;
  --story-letter-spacing: 0.005em;
  --story-max-width: 50rem;

  --shadow-card: 0 1px 0 var(--color-border);
  --shadow-dialog: 0 20px 60px -28px oklch(20% 0.02 60 / 0.35);
  --shadow-pop: 0 6px 24px -16px oklch(20% 0.02 60 / 0.25);

  font-feature-settings: "ss01", "cv11", "kern", "liga";
}

/* Paper-specific tweaks for select atoms */
html[data-theme="paper"] .ui-message-row {
  align-items: flex-start;
}

html[data-theme="paper"] .ui-player-message-row {
  justify-content: flex-start;
}

html[data-theme="paper"] .ui-message-player {
  background: transparent;
  color: var(--color-foreground);
  border-width: 0 0 0 3px;
  border-color: var(--accent-primary);
  border-radius: 0;
  max-width: var(--story-max-width);
  padding: 0.25rem 0 0.25rem 0.875rem;
}

html[data-theme="paper"] .ui-section-title {
  font-style: italic;
}

/* Dashed dividers feel right with the editorial paper tone */
html[data-theme="paper"] .ui-rule-h,
html[data-theme="paper"] .ui-rule {
  border-top-style: dashed;
}

/* ── Dark scheme ─────────────────────────────────────────────── */
html.dark[data-theme="paper"],
html[data-theme="paper"].dark {
  --color-background: oklch(15% 0.012 60);
  --color-foreground: oklch(91% 0.012 80);
  --color-card: oklch(17% 0.014 60);
  --color-card-foreground: oklch(91% 0.012 80);
  --color-popover: oklch(17% 0.014 60);
  --color-popover-foreground: oklch(91% 0.012 80);
  --color-primary: oklch(72% 0.12 75);
  --color-primary-foreground: oklch(15% 0.012 60);
  --color-secondary: oklch(20% 0.016 60);
  --color-secondary-foreground: oklch(85% 0.012 80);
  --color-muted: oklch(20% 0.016 60);
  --color-muted-foreground: oklch(58% 0.018 60);
  --color-accent: oklch(72% 0.12 75);
  --color-accent-foreground: oklch(15% 0.012 60);
  --color-border: oklch(25% 0.018 60);
  --color-input: oklch(25% 0.018 60);
  --color-ring: oklch(72% 0.12 75 / 0.5);

  --surface-page: oklch(13% 0.01 60);
  --surface-rail: oklch(15% 0.012 60);
  --surface-inset: oklch(18% 0.014 60);
  --surface-elevated: oklch(20% 0.016 60);
  --surface-dialog: oklch(20% 0.016 60);
  --surface-player: color-mix(in oklab, var(--accent-primary) 8%, transparent);

  --rule-color: oklch(28% 0.018 60);
  --rule-strong-color: oklch(60% 0.02 60);

  --accent-primary: oklch(72% 0.12 75);
  --accent-secondary: oklch(70% 0.1 220);
  --accent-warning: oklch(78% 0.16 80);
  --accent-success: oklch(70% 0.13 145);

  --ambience-image:
    radial-gradient(
      ellipse at 80% -10%,
      oklch(72% 0.12 75 / 0.08),
      transparent 55%
    ),
    radial-gradient(
      ellipse at -10% 110%,
      oklch(40% 0.08 220 / 0.08),
      transparent 55%
    );
  --noise-opacity: 0.05;

  --shadow-card: 0 1px 0 var(--color-border);
  --shadow-dialog: 0 24px 70px -30px oklch(0% 0 0 / 0.6);
}
