/* =============================================================
   Story Builder — colors_and_type.css
   Single source of truth for design tokens.
   Derived from Snout Theme.story() + macOS system palette.
   ============================================================= */

/* ---------- Google Fonts (web substitutions) ----------
   CMU Serif is not on Google Fonts — we substitute EB Garamond for web.
   In native macOS/iOS, use the bundled OFL TTFs directly.
-------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  /* ============ COLOR — light mode (default) ============ */

  /* Canvas: warm off-white paper. Never pure white. */
  --canvas: #FBF7F0;
  --canvas-tint: #F5EFE2;      /* selected row, subtle fills */
  --bg-chrome: #F0EADC;        /* sidebar/toolbar (behind translucency) */
  --bg-raised: #FFFCF6;        /* popovers, inspector cards */
  --bg-overlay: rgba(255, 252, 246, 0.78); /* translucent chrome */

  /* Ink: warm near-black. */
  --ink: #1A1816;              /* primary text */
  --ink-2: #4A453D;            /* secondary text (labels, metadata) */
  --ink-3: #8A8275;            /* tertiary (timestamps, caption) */
  --ink-4: #B8B0A0;            /* quaternary (placeholders, disabled) */

  /* Hairlines & fills. */
  --hairline: rgba(20, 16, 10, 0.08);
  --hairline-strong: rgba(20, 16, 10, 0.14);
  --fill-hover: rgba(20, 16, 10, 0.04);
  --fill-press: rgba(20, 16, 10, 0.08);

  /* Accent: Sunset Orange — sampled from the app icon. Warm, alive. */
  --accent: #FC6739;
  --accent-hover: #ED5A2D;
  --accent-press: #D94E22;
  --accent-8: rgba(252, 103, 57, 0.08);   /* selected row tint */
  --accent-15: rgba(252, 103, 57, 0.15);  /* hover over selected */
  --accent-25: rgba(252, 103, 57, 0.28);  /* focus ring halo */
  --accent-ink: #FBF7F0;                   /* text on accent fill */

  /* Brand secondaries — the deep navy water and sky teal from the icon. */
  --brand-navy: #0B3B57;       /* deep water — primary brand pair to orange */
  --brand-navy-2: #1C4667;     /* mid navy — surfaces, dark hero blocks */
  --brand-navy-ink: #FBF7F0;
  --brand-sky: #7AC6D6;        /* sky/water highlight — soft cyan-teal */
  --brand-sun: #FD8856;        /* orange highlight (lighter sun) */
  --brand-sun-hi: #FD9764;     /* lightest sun edge */

  /* System-aligned semantic colors (tuned warm to match canvas). */
  --success: #2E8B57;
  --warning: #C47A1D;
  --danger:  #B0351A;
  --info:    #2F6FD6;

  --success-soft: #E4EFE3;
  --warning-soft: #F5E9D3;
  --danger-soft:  #F3DCD4;
  --info-soft:    #DCE7F7;

  /* Comment annotation palette — 6 muted, dyed-paper tones.
     Matches the 6 comment types in AnnotationViewModel. */
  --comment-note:       #C9A765; /* amber — Note */
  --comment-question:   #7B8FB8; /* slate blue — Question */
  --comment-suggestion: #8AA074; /* sage — Suggestion */
  --comment-praise:     #C67FA8; /* rose — Praise */
  --comment-continuity: #7A6BA3; /* violet — Continuity */
  --comment-issue:      #B0351A; /* brick — Issue (reuses danger) */

  /* Underline decorations (AI issues) — dotted / wavy colors */
  --issue-error:   #B0351A;
  --issue-warning: #C47A1D;
  --issue-info:    #2F6FD6;

  /* Diff highlight */
  --diff-add-bg:    rgba(46, 139, 87, 0.12);
  --diff-add-gutter: #2E8B57;
  --diff-remove-bg: rgba(176, 53, 26, 0.10);
  --diff-remove-gutter: #B0351A;

  /* ============ TYPOGRAPHY — families ============ */
  --font-serif: 'EB Garamond', 'CMU Serif', Georgia, 'Times New Roman', serif; /* editor default — CMU Serif substituted to EB Garamond on web */
  --font-serif-literary: 'Crimson Text', 'EB Garamond', Georgia, serif;
  --font-serif-classical: 'Libre Caslon Text', 'EB Garamond', Georgia, serif;
  --font-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-sans-chrome: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono-screenplay: 'Courier Prime', 'Courier New', Courier, monospace;
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* ============ TYPOGRAPHY — editor scale ============
     Follows Snout Theme.story() multipliers on a 16pt body. */
  --editor-body: 16px;
  --editor-h1: calc(var(--editor-body) * 1.75); /* 28 */
  --editor-h2: calc(var(--editor-body) * 1.5);  /* 24 */
  --editor-h3: calc(var(--editor-body) * 1.25); /* 20 */
  --editor-h4: calc(var(--editor-body) * 1.125);/* 18 */
  --editor-h5: var(--editor-body);
  --editor-h6: var(--editor-body);
  --editor-code: calc(var(--editor-body) * 0.875); /* 14 */
  --editor-line-height: 1.75;
  --editor-first-indent: 1.5em;
  --editor-line-width: 720px;  /* ~72ch at 16pt */

  /* ============ TYPOGRAPHY — chrome scale (macOS) ============ */
  --chrome-title: 15px;     /* toolbar titles, sheet headings */
  --chrome-body: 13px;      /* default app body */
  --chrome-caption: 11px;   /* metadata, footnotes */
  --chrome-large-title: 22px;

  /* ============ SPACING ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ============ RADII (macOS/iOS 26 era — more generous) ============ */
  --radius-sm: 6px;       /* small inner shapes, tags */
  --radius: 10px;         /* fields, list rows */
  --radius-md: 14px;      /* buttons, chips, segmented controls */
  --radius-lg: 18px;      /* cards, popovers, inspector panels */
  --radius-xl: 22px;      /* sheets, modals */
  --radius-pill: 999px;   /* toolbars, clusters, find field */

  /* ============ SHADOWS ============ */
  --shadow-popover:
    0 8px 24px -4px rgba(20, 16, 10, 0.18),
    0 2px 6px -2px rgba(20, 16, 10, 0.10);
  --shadow-card: 0 1px 2px rgba(20, 16, 10, 0.06);
  --shadow-inset-field: inset 0 0 0 1px rgba(20, 16, 10, 0.08);
  --shadow-focus: 0 0 0 3px var(--accent-25);

  /* ============ MOTION ============ */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 300ms; /* @kind other */

  /* ============ LAYOUT ============ */
  --sidebar-w: 260px;
  --sidebar-w-min: 200px;
  --sidebar-w-max: 400px;
  --margin-w: 300px;
  --toolbar-h: 44px;
  --row-h: 32px;
}

/* ============ COLOR — dark mode ============ */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas:       #1A1816;
    --canvas-tint:  #242120;
    --bg-chrome:    #14120F;
    --bg-raised:    #221F1C;
    --bg-overlay:   rgba(34, 31, 28, 0.72);

    --ink:   #F2ECE0;
    --ink-2: #C2BAA9;
    --ink-3: #8E8779;
    --ink-4: #5A554B;

    --hairline:        rgba(255, 244, 220, 0.08);
    --hairline-strong: rgba(255, 244, 220, 0.14);
    --fill-hover:      rgba(255, 244, 220, 0.04);
    --fill-press:      rgba(255, 244, 220, 0.08);

    --accent:       #FD8856;
    --accent-hover: #FD9764;
    --accent-press: #FC6739;
    --accent-8:     rgba(253, 136, 86, 0.10);
    --accent-15:    rgba(253, 136, 86, 0.18);
    --accent-25:    rgba(253, 136, 86, 0.32);
    --accent-ink:   #0F0E0C;

    --brand-navy:    #0B3B57;
    --brand-navy-2:  #1C4667;
    --brand-navy-ink:#F2ECE0;
    --brand-sky:     #7AC6D6;
    --brand-sun:     #FD8856;
    --brand-sun-hi:  #FD9764;

    --success-soft: #1E3328;
    --warning-soft: #3A2A16;
    --danger-soft:  #3A1F17;
    --info-soft:    #17263F;
  }
}

/* =============================================================
   SEMANTIC TYPE PRESETS
   Mirror the Snout Theme roles so components can just apply a class.
   ============================================================= */

.type-manuscript-body {
  font-family: var(--font-serif);
  font-size: var(--editor-body);
  line-height: var(--editor-line-height);
  color: var(--ink);
  text-indent: var(--editor-first-indent);
}
.type-manuscript-body + .type-manuscript-body { margin-top: 0; }

.type-manuscript-h1 {
  font-family: var(--font-serif);
  font-size: var(--editor-h1);
  font-weight: 700;
  line-height: 1.2;
  text-indent: 0;
  margin: 0.5em 0 0.25em;
}
.type-manuscript-h2 {
  font-family: var(--font-serif);
  font-size: var(--editor-h2);
  font-weight: 700;
  line-height: 1.25;
  text-indent: 0;
  margin: 0.5em 0 0.25em;
}
.type-manuscript-h3 {
  font-family: var(--font-serif);
  font-size: var(--editor-h3);
  font-weight: 600;
  line-height: 1.3;
  text-indent: 0;
  margin: 0.5em 0 0.25em;
}

.type-chrome-title    { font: 600 var(--chrome-title)/1.25 var(--font-sans-chrome); color: var(--ink); }
.type-chrome-body     { font: 400 var(--chrome-body)/1.4 var(--font-sans-chrome);   color: var(--ink); }
.type-chrome-body-em  { font: 600 var(--chrome-body)/1.4 var(--font-sans-chrome);   color: var(--ink); }
.type-caption         { font: 400 var(--chrome-caption)/1.35 var(--font-sans-chrome); color: var(--ink-3); letter-spacing: 0.01em; }
.type-caption-em      { font: 600 var(--chrome-caption)/1.35 var(--font-sans-chrome); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
.type-mono            { font: 400 13px/1.45 var(--font-mono); color: var(--ink-2); }
.type-screenplay      { font: 400 var(--editor-body)/var(--editor-line-height) var(--font-mono-screenplay); color: var(--ink); }
.type-code            { font: 400 var(--editor-code)/1.5 var(--font-mono); background: var(--fill-hover); padding: 1px 5px; border-radius: var(--radius-sm); }