/* =============================================================
   Binder Design System — colors & type
   Two parallel palettes: WARM (user content) + MIDNIGHT (system).
   Plus typography + spacing + radii + shadows + motion tokens.
   Single import. No build step.
   ============================================================= */

/* Self-hosted Inter variable font — uploaded brand fonts */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- WARM NATURALS (user content) ---------- */
  /* Paper grounds — neutral, slightly warm */
  --paper-0: #fbf7f1;   /* page background */
  --paper-1: #f5efe4;   /* card surface */
  --paper-2: #ede4d3;   /* hover / inset */
  --paper-3: #e1d4bd;   /* divider on paper */

  /* Sand / clay — warm primary */
  --sand-100: #f0e3cd;
  --sand-300: #d8bf95;
  --sand-500: #b8945b;
  --clay-300: #d29670;
  --clay-500: #b8703f;   /* primary action on warm */
  --clay-600: #9a5a30;
  --clay-700: #7a4521;

  /* Sage — secondary accent on warm */
  --sage-100: #dde3d2;
  --sage-300: #a8b491;
  --sage-500: #6f8158;
  --sage-700: #4d5b3c;

  /* Espresso — ink on warm */
  --ink-900: #2b1f12;    /* primary text on paper */
  --ink-700: #4a3826;    /* secondary text on paper */
  --ink-500: #7a624a;    /* muted text on paper */
  --line:    #d6c7ad;    /* 1px hairlines on paper */

  /* ---------- MIDNIGHT + ICE (system / AI / warnings) ---------- */
  --midnight-900: #0a1422;
  --midnight-800: #0d1b2a;   /* canonical midnight ground */
  --midnight-700: #142436;
  --midnight-600: #1d3148;

  --ice-100: #eaf3fb;
  --ice-300: #a8d0f0;        /* canonical light-blue text/outline */
  --ice-500: #5fa3da;
  --ice-700: #2f6fa6;

  --line-ink: rgba(255, 255, 255, 0.12);

  /* Existing (preserved verbatim from webapp/app/globals.css) */
  --bg-color: #0d1117;
  --panel-bg: rgba(22, 27, 34, 0.7);
  --border-color: rgba(255, 255, 255, 0.10);
  --accent: #58a6ff;            /* legacy blue — keep for unconverted screens */
  --text-main: #c9d1d9;
  --text-muted: #8b949e;

  /* ---------- SEMANTIC FG / BG ---------- */
  --fg-1: var(--ink-900);       /* primary text on warm */
  --fg-2: var(--ink-700);
  --fg-3: var(--ink-500);
  --fg-on-ink-1: #ffffff;       /* primary text on midnight */
  --fg-on-ink-2: var(--ice-100);
  --fg-on-ink-3: var(--ice-300);

  --bg-page: var(--paper-0);
  --bg-card: var(--paper-1);
  --bg-card-hover: var(--paper-2);
  --bg-ink-page: var(--midnight-800);
  --bg-ink-card: var(--midnight-700);

  --primary:        var(--clay-500);
  --primary-hover:  var(--clay-600);
  --primary-press:  var(--clay-700);
  --primary-on:     #ffffff;

  /* Status — borrowed from system palette so they always read as "Binder is talking" */
  --info-bg:    var(--midnight-800);
  --info-fg:    var(--ice-300);
  --info-line:  var(--ice-300);

  --warn-bg:    var(--midnight-800);
  --warn-fg:    #ffd28a;
  --warn-line:  #ffd28a;

  --error-bg:   var(--midnight-800);
  --error-fg:   #ff9e8a;
  --error-line: #ff9e8a;

  --success-bg: var(--midnight-800);
  --success-fg: #9be3b8;
  --success-line: #9be3b8;

  --focus: var(--clay-500);
  --focus-ink: var(--ice-300);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Type scale — modular ~1.2 ratio, anchored at 16 */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

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

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;     /* legacy webapp button radius */
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-paper-sm: 0 1px 2px rgba(60, 40, 20, 0.06);
  --shadow-paper-md: 0 2px 6px rgba(60, 40, 20, 0.08), 0 1px 2px rgba(60, 40, 20, 0.06);
  --shadow-paper-lg: 0 8px 24px rgba(60, 40, 20, 0.10), 0 2px 6px rgba(60, 40, 20, 0.06);
  --shadow-ink-sm:   0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-ink-md:   0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-ink-lg:   0 8px 32px rgba(0, 0, 0, 0.40);
  --shadow-focus:    0 0 0 2px var(--bg-page), 0 0 0 4px var(--focus);
  --shadow-focus-ink:0 0 0 2px var(--bg-ink-page), 0 0 0 4px var(--focus-ink);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-instant: 80ms;
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  /* ---------- LAYOUT ---------- */
  --sidebar-w: 260px;
  --sidepanel-w: 360px;
  --content-max: 1200px;
}

/* =============================================================
   SEMANTIC TYPE — opinionated defaults so "h1 { font: var(--h1) }"
   works out of the box. Use the var() form, not these blanket rules,
   inside design files so app classes don't get clobbered.
   ============================================================= */

:root {
  --h1: var(--fw-semibold) var(--fs-40)/var(--lh-tight) var(--font-sans);
  --h2: var(--fw-semibold) var(--fs-32)/var(--lh-tight) var(--font-sans);
  --h3: var(--fw-semibold) var(--fs-24)/var(--lh-snug)  var(--font-sans);
  --h4: var(--fw-semibold) var(--fs-20)/var(--lh-snug)  var(--font-sans);
  --h5: var(--fw-medium)   var(--fs-16)/var(--lh-snug)  var(--font-sans);
  --h6: var(--fw-medium)   var(--fs-13)/var(--lh-snug)  var(--font-sans);
  --body:        var(--fw-regular) var(--fs-16)/var(--lh-normal) var(--font-sans);
  --body-sm:     var(--fw-regular) var(--fs-14)/var(--lh-normal) var(--font-sans);
  --body-xs:     var(--fw-regular) var(--fs-13)/var(--lh-normal) var(--font-sans);
  --label:       var(--fw-medium)  var(--fs-13)/var(--lh-snug)   var(--font-sans);
  --eyebrow:     var(--fw-medium)  var(--fs-12)/var(--lh-snug)   var(--font-sans);
  --code:        var(--fw-regular) var(--fs-14)/var(--lh-normal) var(--font-mono);
  --code-sm:     var(--fw-regular) var(--fs-12)/var(--lh-normal) var(--font-mono);
}

/* =============================================================
   BASELINE (only applied to .ds-page / .ds-page-ink — never global,
   so the tokens can be imported without smashing host pages)
   ============================================================= */

.ds-page,
.ds-page-ink {
  font: var(--body);
  color: var(--fg-1);
  letter-spacing: var(--tracking-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ds-page { background: var(--bg-page); color: var(--fg-1); }
.ds-page-ink { background: var(--bg-ink-page); color: var(--fg-on-ink-1); }

.ds-page h1, .ds-page-ink h1 { font: var(--h1); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.ds-page h2, .ds-page-ink h2 { font: var(--h2); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.ds-page h3, .ds-page-ink h3 { font: var(--h3); letter-spacing: var(--tracking-snug);  text-wrap: balance; }
.ds-page h4, .ds-page-ink h4 { font: var(--h4); letter-spacing: var(--tracking-snug);  text-wrap: balance; }
.ds-page p,  .ds-page-ink p  { font: var(--body); text-wrap: pretty; max-width: 70ch; }
.ds-page code, .ds-page-ink code { font: var(--code); }

/* Reusable surfaces */
.card-paper {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-paper-sm);
}
.card-ink {
  background: var(--panel-bg);
  border: 1px solid var(--line-ink);
  border-radius: 12px;
  padding: var(--space-6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-ink-lg);
  color: var(--fg-on-ink-1);
}