/* ==========================================================================
   Instiglio design system — tokens, vendored from the Claude Design project
   `instiglio-design-system-1c4425ae-985b-4cbc-869d-7d08423cd4c2`.

   This file is a faithful copy of the design system's tokens/{fonts,colors,
   typography,spacing,effects,app}.css, concatenated, with only the @font-face
   src paths repointed at /static/ds/fonts/. Keep it that way: edit the design
   system and re-vendor rather than hand-tuning values here, or the dashboard
   and the brand drift apart.

   Deliberately NOT vendored: the design system's tokens/base.css, which styles
   bare h1/h2/p/a globally. The dashboard still has Tailwind-styled pages, and
   a global 40px <h2> would wreck them. Its rules live scoped under `.ds` in
   shell.css instead.
   ========================================================================== */

/* ---- Display: Riviera Nights (Swiss Typefaces, licensed) ---------------- */
@font-face {
  font-family: "Riviera Nights";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/ds/fonts/RivieraNights-Regular.ttf") format("truetype");
}

/* ---- Text: Instrument Sans (SIL OFL) — variable, 400..700 --------------- */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/ds/fonts/InstrumentSans-var.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/ds/fonts/InstrumentSans-var-italic.woff2") format("woff2");
}

/* ==========================  Color  ====================================== */
:root {
  /* --- Primary --- */
  --warm-black: #230520;   /* primary text + dark surfaces */
  --ember:      #f46851;   /* the spark — highlight / accent only */
  --soft-peach: #ffe1dc;
  --white:      #ffffff;

  /* --- Secondary (data-viz: ember + sand ramps) --- */
  --warm-black-t1: #5d4750;
  --ember-s2: #bf1600;
  --ember-s1: #d1513d;
  --ember-t1: #f5997f;
  --sand-s1:  #bf8c57;
  --sand:     #ffba73;
  --sand-t1:  #ffd6ab;

  /* --- Tertiary --- */
  --land-s1: #6b8f73;
  --land:    #8fbf9c;
  --land-t1: #b2d3bb;
  --sea-s1:  #7880b2;
  --sea:     #9eabed;
  --sea-t1:  #c4ccf5;

  /* --- Neutral ramp --- */
  --warm-100: #faf6f5;
  --warm-200: #f1e9e7;
  --warm-300: #e3d6d3;
  --warm-400: #c9b8b5;
  --warm-500: #9a8489;
  --warm-600: #5d4750;
  --warm-700: #3a1f33;

  /* --- Semantic aliases --- */
  --text-primary:   var(--warm-black);
  --text-secondary: var(--warm-black-t1);
  --text-muted:     var(--warm-500);
  --text-on-dark:   var(--white);
  --text-on-ember:  var(--white);
  --text-accent:    var(--ember-s1);
  --text-link:      var(--ember-s1);

  --surface-page:   var(--white);
  --surface-card:   var(--white);
  --surface-tint:   var(--soft-peach);
  --surface-dark:   var(--warm-black);
  --surface-accent: var(--ember);
  --surface-muted:  var(--warm-100);

  --border-subtle:  var(--warm-300);
  --border-default: var(--warm-400);
  --border-strong:  var(--warm-black);
  --border-accent:  var(--ember);

  --accent:        var(--ember);
  --accent-hover:  var(--ember-s1);
  --accent-active: var(--ember-s2);
  --focus-ring:    var(--ember);

  --positive: var(--land-s1);
  --warning:  var(--sand-s1);
  --critical: var(--ember-s2);
  --info:     var(--sea-s1);
}

/* ==========================  Typography  ================================= */
:root {
  --font-display:  "Riviera Nights", "Outfit", "Instrument Sans", system-ui, sans-serif;
  --font-text:     "Instrument Sans", Arial, system-ui, sans-serif;
  --font-mono:     ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-fallback: Arial, system-ui, sans-serif;

  --fw-display:  400;   /* display is REGULAR ONLY per brand */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

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

  --leading-display: 1.05;
  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-body:    1.55;

  --text-display-xl: 76px;
  --text-display-l:  56px;
  --text-display-m:  40px;
  --text-display-s:  30px;
  --text-subtitle:   24px;
  --text-lead:       20px;
  --text-body:       16px;
  --text-small:      14px;
  --text-footnote:   12px;
}

/* ==========================  Spacing  ==================================== */
:root {
  --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;
  --space-24: 96px;
  --space-32: 128px;

  --container-max: 1200px;
  --measure: 68ch;
}

/* ==========================  Effects  ==================================== */
:root {
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-strong: 2px;

  --shadow-xs: 0 1px 2px rgba(35, 5, 32, 0.06);
  --shadow-sm: 0 1px 3px rgba(35, 5, 32, 0.08), 0 1px 2px rgba(35, 5, 32, 0.06);
  --shadow-md: 0 4px 12px rgba(35, 5, 32, 0.10), 0 2px 4px rgba(35, 5, 32, 0.06);
  --shadow-lg: 0 12px 32px rgba(35, 5, 32, 0.14), 0 4px 8px rgba(35, 5, 32, 0.06);
  --shadow-focus: 0 0 0 3px rgba(244, 104, 81, 0.35);

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

/* ==========================  App layer  ================================== */
:root {
  --app-sidebar-w: 248px;
  --app-sidebar-w-collapsed: 64px;
  --app-topbar-h: 60px;

  --control-h:    38px;
  --control-h-sm: 30px;
  --control-h-lg: 46px;
  --app-radius:    var(--radius-md);
  --app-radius-sm: var(--radius-sm);

  --app-gap-1: 4px;
  --app-gap-2: 8px;
  --app-gap-3: 12px;
  --app-gap-4: 16px;
  --app-gap-5: 20px;
  --app-gap-6: 24px;
  --app-pad-x: 24px;
  --app-pad-y: 20px;

  --app-text-xs: 12px;
  --app-text-sm: 13px;
  --app-text:    14px;
  --app-text-lg: 16px;

  --row-h:    44px;
  --row-h-sm: 36px;

  --app-bg:      var(--warm-100);
  --app-panel:   var(--white);
  --app-hover:   var(--warm-100);
  --app-active:  var(--soft-peach);
  --app-overlay: rgba(35, 5, 32, 0.44);
}

/* ==========================  Dark app theme  =============================
   Set data-theme="dark" on <html>. Ember and the data-viz ramps are
   unchanged; only surfaces, text, borders and the neutral ramp remap. */
[data-theme="dark"] {
  --surface-page:  #17040f;
  --surface-card:  #24091f;
  --surface-tint:  #351a2f;
  --surface-dark:  #120309;
  --surface-muted: #1d0618;

  --text-primary:   #f7ece9;
  --text-secondary: #d6c1bf;
  --text-muted:     #a98f97;
  --text-on-dark:   #f7ece9;
  --text-accent:    var(--ember-t1);
  --text-link:      var(--ember-t1);

  --border-subtle:  #351a2f;
  --border-default: #46283c;
  --border-strong:  #6b4f60;

  --warm-100: #1f0619;
  --warm-200: #331430;
  --warm-300: #46283c;
  --warm-400: #6b4f60;
  --warm-500: #9a8489;

  --app-bg:      #120309;
  --app-panel:   #20081b;
  --app-hover:   #2c0f26;
  --app-active:  #3a1230;
  --app-overlay: rgba(0, 0, 0, 0.62);
}