/* =============================================================
   Attuant Design System — Colors & Type
   ─────────────────────────────────────────────────────────────
   Restrained palette. Two primaries, one accent. Museum, not SaaS.
   Geometric sans with personality. No swagger.
   ============================================================= */

/* -------------------------------------------------------------
   FONT FACES — all licensed, self-hosted.
   Söhne (Klim Type Foundry): primary sans + mono.
     · Buch (400) + BuchKursiv (400 italic) — body & UI
     · Breit Buch — wide cut for display moments (optional)
     · Schmal Buch — narrow cut for tight UI / labels (optional)
     · Mono Buch — code, tokens, numerals
   ABC Diatype Mono (Dinamo): retained as alt mono.
   ------------------------------------------------------------- */

/* Söhne — primary */
@font-face {
  font-family: "Söhne";
  src: url("assets/fonts/TestSohne-Buch-BF663d89cd32e6a.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Söhne";
  src: url("assets/fonts/TestSohne-BuchKursiv-BF663d89cd3e887.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* Söhne Breit — extended / display */
@font-face {
  font-family: "Söhne Breit";
  src: url("assets/fonts/TestSohneBreit-Buch-BF663d89ca2ff42.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Söhne Breit";
  src: url("assets/fonts/TestSohneBreit-BuchKursiv-BF663d89ca6008d.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* Söhne Schmal — narrow / tight UI */
@font-face {
  font-family: "Söhne Schmal";
  src: url("assets/fonts/TestSohneSchmal-Buch-BF663d89cacd623.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Söhne Schmal";
  src: url("assets/fonts/TestSohneSchmal-BuchKursiv-BF663d89caa996a.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* Söhne Mono — code, numerals, tokens */
@font-face {
  font-family: "Söhne Mono";
  src: url("assets/fonts/TestSohneMono-Buch-BF663d89cbcec64.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Söhne Mono";
  src: url("assets/fonts/TestSohneMono-BuchKursiv-BF663d89cc8d4c3.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ABC Diatype Mono — alternate mono (kept available) */
@font-face {
  font-family: "ABC Diatype Mono";
  src: url("assets/fonts/abc-diatype-mono-regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* =============================================================
   COLOR — base palette
   ============================================================= */
:root {
  /* INK — the deep dark base. Outrenoir: black with warmth and depth.
     Soulages-inspired. Not pure #000; there is soul in the undertone. */
  --ink-1000: #0a0908;     /* deepest — full bleed backgrounds */
  --ink-900:  #14110f;     /* surface ink */
  --ink-800:  #1f1b18;     /* raised surface */
  --ink-700:  #2a2521;     /* lines on dark */
  --ink-600:  #3a342f;     /* dim text on dark */
  --ink-500:  #5a514a;     /* muted text on dark */
  --ink-400:  #877d75;     /* secondary text on dark */
  --ink-300:  #a89e95;     /* tertiary text */

  /* PAPER — the off-white. Bone, not white. Lived-in, not sterile. */
  --paper-50:  #faf8f4;    /* page background */
  --paper-100: #f4f0e8;    /* surface */
  --paper-200: #ebe5d9;    /* raised surface, subtle dividers */
  --paper-300: #d9d1c1;    /* hairline borders on light */
  --paper-400: #b8ad99;    /* muted text on light */

  /* PLUMB — secondary. The plumb line. Deep navy used sparingly. */
  --plumb-900: #0d1726;
  --plumb-800: #16243a;
  --plumb-700: #1f3454;

  /* OCHRE — the accent. Dusty mustard. The act. The strike.
     Used sparingly: a single number, a line, a moment. */
  --ochre-700: #8a6a1f;
  --ochre-600: #b08628;
  --ochre-500: #c69a3a;    /* primary accent */
  --ochre-400: #d4ad5c;
  --ochre-300: #e2c283;

  /* RUST — secondary accent. Desaturated, not flame. Reserved use. */
  --rust-600: #8a4a32;
  --rust-500: #a85d3f;

  /* SEMANTIC — restrained, never neon */
  --signal-positive: #4f7a4a;   /* moss, not lime */
  --signal-warning:  #b08628;   /* same family as ochre */
  --signal-negative: #8a4032;   /* dried rust */
  --signal-info:     #1f3454;   /* plumb */

  /* =============================================================
     SEMANTIC TOKENS — light theme (paper)
     ============================================================= */
  --bg:           var(--paper-50);
  --bg-raised:    var(--paper-100);
  --bg-sunken:    var(--paper-200);
  --bg-inverse:   var(--ink-1000);

  --fg:           var(--ink-1000);   /* primary text */
  --fg-muted:     var(--ink-500);    /* secondary text */
  --fg-subtle:    var(--ink-400);    /* tertiary, captions */
  --fg-inverse:   var(--paper-50);

  --border:       var(--paper-300);
  --border-strong: var(--ink-700);
  --hairline:     var(--paper-200);

  --accent:       var(--ochre-500);
  --accent-hover: var(--ochre-600);
  --accent-fg:    var(--ink-1000);   /* text ON ochre */

  --link:         var(--ink-1000);
  --link-hover:   var(--ochre-600);

  /* =============================================================
     SHADOWS — paper-on-paper. Quiet. Never glowing.
     ============================================================= */
  --shadow-xs: 0 1px 0 rgba(20, 17, 15, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 17, 15, 0.06), 0 0 0 1px rgba(20, 17, 15, 0.03);
  --shadow-md: 0 4px 12px rgba(20, 17, 15, 0.07), 0 0 0 1px rgba(20, 17, 15, 0.04);
  --shadow-lg: 0 12px 32px rgba(20, 17, 15, 0.10), 0 0 0 1px rgba(20, 17, 15, 0.05);

  /* Inset hairline — used on cards and inputs for a printed-paper feel */
  --shadow-inset-line: inset 0 0 0 1px var(--paper-300);

  /* =============================================================
     RADII — minimal. Square or near-square. No pill rounding.
     ============================================================= */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;   /* reserved for tags / status dots */

  /* =============================================================
     SPACING — 4px base. Strict scale.
     ============================================================= */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* =============================================================
     MOTION — short, certain. Never bouncy. Never spring.
     The act is decisive.
     ============================================================= */
  --ease-out:    cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    360ms;

  /* =============================================================
     LAYOUT
     ============================================================= */
  --measure:    68ch;          /* prose max-width */
  --container:  1200px;
  --container-narrow: 880px;

  /* =============================================================
     TYPOGRAPHY — type stacks
     ============================================================= */
  --font-sans:    "Söhne", "Geist", "GT America", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Söhne", "Geist", "GT America", "Inter", -apple-system, sans-serif;
  --font-display-wide: "Söhne Breit", "Söhne", "Geist", -apple-system, sans-serif;
  --font-narrow:  "Söhne Schmal", "Söhne", "Geist", -apple-system, sans-serif;
  --font-mono:    "Söhne Mono", "ABC Diatype Mono", "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — modular, restrained.
     Major Third (1.250) at the top, tighter at body. */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;
  --text-4xl:  60px;
  --text-5xl:  84px;
  --text-6xl:  120px;

  /* Line heights — tight on display, comfortable on body */
  --lh-display: 0.96;
  --lh-tight:   1.12;
  --lh-snug:    1.32;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* Tracking — display tightens, mono opens */
  --track-display:  -0.02em;
  --track-tight:    -0.01em;
  --track-normal:   0;
  --track-wide:     0.04em;
  --track-eyebrow:  0.14em;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
}

/* =============================================================
   DARK THEME — invert to ink-on-paper rules
   Apply by adding `.dark` to <html> or any container.
   ============================================================= */
.dark, [data-theme="dark"] {
  --bg:           var(--ink-1000);
  --bg-raised:    var(--ink-900);
  --bg-sunken:    var(--ink-1000);
  --bg-inverse:   var(--paper-50);

  --fg:           var(--paper-50);
  --fg-muted:     var(--ink-300);
  --fg-subtle:    var(--ink-400);
  --fg-inverse:   var(--ink-1000);

  --border:       var(--ink-700);
  --border-strong: var(--ink-600);
  --hairline:     var(--ink-800);

  --accent:       var(--ochre-400);
  --accent-hover: var(--ochre-300);
  --accent-fg:    var(--ink-1000);

  --link:         var(--paper-50);
  --link-hover:   var(--ochre-400);

  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 248, 235, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 248, 235, 0.05);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 248, 235, 0.06);
}

/* =============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   Use these directly: .h1, .h2, .body, .eyebrow, .mono, etc.
   ============================================================= */

.display-xl, .h0 {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-medium);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}

.display-lg, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-medium);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}

.h3 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}

.h4 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
}

.h5 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
}

.h6 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-snug);
}

.body-lg, .lede {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  letter-spacing: 0;
}

.body, p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  letter-spacing: 0;
}

.body-sm, .caption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
}

.eyebrow, .overline {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  line-height: 1;
}

.label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-normal);
  line-height: 1.2;
}

.mono, code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}

.numeric, .tnum {
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* =============================================================
   BASE
   ============================================================= */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--paper-300);
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }

::selection { background: var(--ochre-300); color: var(--ink-1000); }

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--space-6) 0;
}