/* ============================================================
   Mora Design System — colors_and_type.css
   Two coordinated directions sharing a single warm-neutral core:
     • Direction A — "Plan"   (architectural / CAD / drafting)
     • Direction B — "Schema" (technical / data-forward / mono)
   Both use the same color tokens; they diverge in type stack
   and surface treatment. Switch with [data-direction="schema"].
   ============================================================ */

/* ---------- 1. Color tokens ----------
   Warm neutrals: cream paper, deep ink, single rust accent.
   Named after the role, not the hue. */
:root {
  /* Paper / surfaces (warm, slightly desaturated cream → ink) */
  --paper:        #F2EDE4;   /* drafting paper, page bg */
  --paper-2:      #EAE3D6;   /* slightly tinted panel */
  --paper-3:      #DDD4C2;   /* rule blocks, titleblock fill */
  --paper-edge:   #C9BEA8;   /* hairline border on paper */

  /* Ink / type (deep, slightly warm — never pure black) */
  --ink:          #1A1714;   /* primary fg */
  --ink-2:        #3D3630;   /* secondary fg */
  --ink-3:        #6B5F53;   /* tertiary, captions, metadata */
  --ink-4:        #9C8E7F;   /* quaternary, hairlines on dark */

  /* Accent — single rust. Used sparingly: section markers,
     active state, dimension lines, emphasis. Never decorative. */
  --rust:         #B5482A;
  --rust-deep:    #8B3318;
  --rust-tint:    #E8C9BC;   /* 12% accent on paper */

  /* Inverse (rare — used only for full-bleed schema tables / dark mode demo) */
  --ink-paper:    #14110E;   /* near-black warm bg */
  --ink-paper-2:  #221E19;
  --ink-on-dark:  #E8DFD0;   /* paper-tinted fg on dark */

  /* Semantic surfaces (paper context, the default) */
  --bg:           var(--paper);
  --bg-elev:      var(--paper-2);
  --bg-sunk:      var(--paper-3);

  --fg:           var(--ink);
  --fg-muted:     var(--ink-2);
  --fg-subtle:    var(--ink-3);
  --fg-faint:     var(--ink-4);

  --accent:       var(--rust);
  --accent-deep:  var(--rust-deep);
  --accent-tint:  var(--rust-tint);

  /* Hairlines — the design's primary structural device. */
  --hairline:     #1A171420;     /* 12% ink — most rules */
  --hairline-2:   #1A171410;     /* 6%  ink — subdivisions */
  --hairline-3:   #1A171440;     /* 25% ink — major rules */
  --hairline-px:  0.5px;         /* CAD-grade thin rule */

  /* ---------- 2. Spacing scale (4-step CAD grid) ----------
     Based on a 4px module. Names align with a drafting grid. */
  --s-0:  2px;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;
  --s-12: 256px;

  /* ---------- 3. Radii ----------
     Architectural drawings have square corners. Almost everything
     is 0. A subtle 2px is reserved for input affordances. */
  --r-0: 0;
  --r-1: 2px;
  --r-pill: 999px;            /* used only for round dots/registration marks */

  /* ---------- 4. Elevation ----------
     This system avoids drop shadows. Depth is conveyed through
     hairlines and paper tone, not blur. The shadow tokens below
     are very restrained — for hover/lift states only. */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 var(--hairline);            /* underline rule */
  --shadow-2: 0 0 0 0.5px var(--hairline-3);        /* CAD outline */
  --shadow-hover: 0 0 0 0.5px var(--ink) inset;     /* hover: thicker outline */

  /* ---------- 5. Type — Direction A (Plan, default) ----------
     Display: a transitional/modern serif (drawing-titleblock).
     Body:    geometric grotesk (planning labels).
     Mono:    a precise mono for dimensions and data.
     Substitutions noted in README — flag to user. */
  --font-display: "GT Sectra", "Tiempos Headline", "Source Serif 4",
                  "Newsreader", Georgia, serif;
  --font-sans:    "Söhne", "Suisse Int'l", "Inter Tight",
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono",
                  "Söhne Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Type scale (compact, editorial — paired with generous leading) */
  --t-display-1:  clamp(48px, 7vw, 96px);
  --t-display-2:  clamp(36px, 5vw, 64px);
  --t-h1:         clamp(28px, 3.2vw, 44px);
  --t-h2:         24px;
  --t-h3:         18px;
  --t-h4:         15px;
  --t-body:       15px;
  --t-body-lg:    17px;
  --t-small:      13px;
  --t-meta:       11px;     /* titleblock metadata, tick labels */
  --t-micro:      10px;     /* dimension labels */

  --lh-display:   1.04;
  --lh-tight:     1.15;
  --lh-body:      1.55;
  --lh-loose:     1.7;

  --ls-display:  -0.02em;
  --ls-body:      0;
  --ls-mono:      0;
  --ls-meta:      0.08em;   /* used with uppercase metadata */
  --ls-micro:     0.16em;   /* engraved-feel labels */
}

/* ---------- 6. Direction B — Schema (technical / mono-forward) ---------- */
[data-direction="schema"] {
  --font-display: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --font-sans:    "Inter Tight", "Suisse Int'l", "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --t-display-1: clamp(40px, 5.5vw, 72px);
  --t-display-2: clamp(28px, 4vw, 48px);
  --ls-display:  -0.01em;

  /* Schema tightens hairlines — schematic feel, denser grid */
  --hairline:    #1A171430;
}

/* ---------- 7. Dark mode — used only on schema "console" surfaces. ---------- */
[data-surface="console"] {
  --bg:        var(--ink-paper);
  --bg-elev:   var(--ink-paper-2);
  --bg-sunk:   #0E0C0A;
  --fg:        var(--ink-on-dark);
  --fg-muted:  #B6AC9A;
  --fg-subtle: #847B6C;
  --fg-faint:  #5A5247;
  --hairline:  #E8DFD020;
  --hairline-2:#E8DFD010;
  --hairline-3:#E8DFD040;
}

/* ============================================================
   8. Semantic / element styling
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display & headings */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  margin: 0;
}
.display-1 {
  font-family: var(--font-display);
  font-size: var(--t-display-1);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.display-2 {
  font-family: var(--font-display);
  font-size: var(--t-display-2);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-tight);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: 500;
  line-height: var(--lh-tight);
  margin: 0;
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
}
.lead {
  font-family: var(--font-sans);
  font-size: var(--t-body-lg);
  line-height: 1.5;
  color: var(--fg);
}
.small  { font-size: var(--t-small); color: var(--fg-muted); }
.meta {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.micro {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--fg-faint);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--ls-mono);
}

a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-3);
  transition: color 120ms linear, border-color 120ms linear;
}
a:hover { color: var(--accent); border-bottom-color: var(--accent); }
a:active { color: var(--accent-deep); }

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

::selection { background: var(--accent-tint); color: var(--ink); }