/* ==========================================================================
   Nowhere Theory — Foundations
   Editorial · cool / detached · off-duty · lightly grunge
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
/* Editorial serif: Newsreader — warm, literary, slightly quirky display serif.
   Clean sans: Inter Tight — neutral working sans, good at small sizes.
   Annotation: Caveat — hand-scrawled marginalia font, used SPARINGLY. */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400;1,6..72,500&family=Inter+Tight:wght@300;400;500;600&family=Caveat:wght@400;500;600&display=swap');

:root {
  /* ------------------------------------------------------------
     COLOR — sourced from nt color palette v.1
     ------------------------------------------------------------ */

  /* Raw palette */
  --nt-navy:     #2C3F70;  /* primary ink, used for deep fills + headers */
  --nt-oxblood:  #351710;  /* espresso/oxblood — accent, reserved moments */
  --nt-bone:     #E8EBED;  /* bone/paper — default surface */
  --nt-powder:   #C8D4E5;  /* powder — soft secondary surface, rules */

  /* Extended neutrals derived for real UI work */
  --nt-paper:    #F4F2EC;  /* slightly warm paper, for large surfaces */
  --nt-ink:      #1A1410;  /* near-black, derived from oxblood */
  --nt-graphite: #4A4842;  /* muted warm gray for body copy on light */
  --nt-ash:      #8A8880;  /* tertiary text, timestamps, meta */
  --nt-line:     #D6D4CC;  /* hairline rule on paper */
  --nt-line-cool:#B8C4D4;  /* hairline on powder surfaces */

  /* Tints of navy for layering */
  --nt-navy-95:  #3A4C7A;
  --nt-navy-70:  rgba(44, 63, 112, 0.70);
  --nt-navy-40:  rgba(44, 63, 112, 0.40);
  --nt-navy-12:  rgba(44, 63, 112, 0.12);
  --nt-navy-06:  rgba(44, 63, 112, 0.06);

  /* Tints of oxblood */
  --nt-oxblood-70: rgba(53, 23, 16, 0.70);
  --nt-oxblood-12: rgba(53, 23, 16, 0.12);

  /* ------------------------------------------------------------
     SEMANTIC — prefer these in components
     ------------------------------------------------------------ */

  /* Surfaces */
  --surface-0: var(--nt-paper);        /* page */
  --surface-1: var(--nt-bone);         /* cards, panels */
  --surface-2: var(--nt-powder);       /* raised / secondary panels */
  --surface-inverse: var(--nt-ink);    /* dark sections */
  --surface-accent:  var(--nt-navy);   /* brand moments */

  /* Foreground */
  --fg-1: var(--nt-ink);               /* primary text on light */
  --fg-2: var(--nt-graphite);          /* body text */
  --fg-3: var(--nt-ash);               /* meta, labels, timestamps */
  --fg-on-dark-1: var(--nt-bone);      /* primary text on dark */
  --fg-on-dark-2: var(--nt-powder);    /* secondary on dark */
  --fg-on-dark-3: rgba(232, 235, 237, 0.55);

  /* Lines & strokes */
  --stroke-1: var(--nt-line);          /* default hairline */
  --stroke-2: var(--nt-line-cool);     /* cool hairline */
  --stroke-strong: var(--nt-ink);      /* declarative underline */

  /* Accents */
  --accent-ink:     var(--nt-navy);
  --accent-ember:   var(--nt-oxblood);
  --accent-annotation: var(--nt-oxblood); /* hand-scrawled color */

  /* Status (kept muted — no neon) */
  --ok:     #4A6B52;
  --warn:   #9C6B2F;
  --danger: var(--nt-oxblood);

  /* ------------------------------------------------------------
     TYPE
     ------------------------------------------------------------ */
  --font-serif: 'Newsreader', 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-sans:  'Inter Tight', 'Neue Haas Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --font-hand:  'Caveat', 'Bradley Hand', cursive;
  --font-mono:  ui-monospace, 'IBM Plex Mono', 'JetBrains Mono', Menlo, monospace;

  /* Scale — editorial; display sizes lean big, body stays calm */
  --t-display:   clamp(56px, 8vw, 128px);
  --t-h1:        clamp(40px, 5vw, 72px);
  --t-h2:        clamp(28px, 3vw, 40px);
  --t-h3:        22px;
  --t-h4:        18px;
  --t-body-lg:   18px;
  --t-body:      16px;
  --t-body-sm:   14px;
  --t-meta:      12px;
  --t-eyebrow:   11px;

  /* Line heights — tight display, generous body */
  --lh-tight: 0.95;
  --lh-snug:  1.12;
  --lh-body:  1.55;
  --lh-loose: 1.75;

  /* Letter spacing */
  --ls-display: -0.02em;
  --ls-body:    0;
  --ls-eyebrow: 0.18em;
  --ls-caps:    0.08em;

  /* ------------------------------------------------------------
     SPACING / RADII / SHADOWS
     ------------------------------------------------------------ */
  --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;

  /* Corners are restrained — editorial = mostly square.
     The system uses 2px for inputs, 0 for cards, and the occasional 999. */
  --r-none:  0;
  --r-xs:    2px;
  --r-sm:    4px;
  --r-pill:  999px;

  /* Shadows — paper-like, never glossy */
  --shadow-paper: 0 1px 0 rgba(26, 20, 16, 0.04), 0 2px 12px rgba(26, 20, 16, 0.05);
  --shadow-lift:  0 2px 0 rgba(26, 20, 16, 0.06), 0 12px 32px rgba(26, 20, 16, 0.08);
  --shadow-inset: inset 0 0 0 1px var(--stroke-1);
  --shadow-focus: 0 0 0 2px var(--nt-paper), 0 0 0 4px var(--nt-navy);

  /* Motion — quiet. No springs, no bounces. */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
}

/* ==========================================================================
   SEMANTIC ELEMENTS — drop this stylesheet in and these work out of the box
   ========================================================================== */

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

/* Headings use the serif by default */
h1, h2, h3, .display {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--fg-1);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin: 0;
}

.display {
  font-size: var(--t-display);
  font-weight: 300;
}

h1 {
  font-size: var(--t-h1);
  font-weight: 400;
}

h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
}

h3 {
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
}

h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0;
}

p {
  font-family: var(--font-sans);
  color: var(--fg-2);
  max-width: 62ch;
  margin: 0;
}

.lede {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.4;
  color: var(--fg-1);
  font-weight: 300;
  font-style: italic;
}

/* Small caps-ish label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-3);
}

/* Hand annotation — only where marked */
.annotation {
  font-family: var(--font-hand);
  color: var(--accent-annotation);
  font-size: 22px;
  line-height: 1.1;
  font-weight: 500;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--nt-navy-06);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  color: var(--nt-navy);
}

a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity var(--dur-1) var(--ease-out);
}
a:hover { opacity: 0.6; }

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

::selection {
  background: var(--nt-navy);
  color: var(--nt-bone);
}