/* ==========================================================================
   Nordstille — tokens
   Colour, type, space, radii, shadows, motion.
   Consumed by every preview card and every UI kit in this project.
   ========================================================================== */

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

:root {
  /* --- Colour --------------------------------------------------------- */
  --paper:      #F4F0E8;   /* warm off-white, dominant background */
  --paper-deep: #EDE7DB;   /* a shade deeper, for card surfaces on paper */
  --ink:        #1C1F1B;   /* near-black with green-grey undertone */
  --ink-80:     #373B37;
  --ink-60:     #5B5E5A;
  --ink-40:     #8B8E8A;
  --ink-20:     #B9BAB7;
  --ink-10:     #D8D8D4;
  --ink-05:     #E8E6DF;

  --fjord:      #3A4A48;   /* primary brand — muted teal-green */
  --fjord-80:   #4C5C5A;
  --fjord-20:   #D2D7D5;

  --skog:       #5F6B4E;   /* secondary — forest green */
  --sten:       #A8A195;   /* warm stone grey — rules, secondary UI */
  --sand:       #D9CDB7;   /* pale sand — card surfaces */
  --sand-deep:  #C7B99E;
  --lav:        #8FA0A0;   /* lichen blue-grey — accent */
  --tegl:       #B5573A;   /* muted terracotta — editorial + warnings only */

  /* Semantic */
  --bg:              var(--paper);
  --bg-raised:       var(--paper-deep);
  --bg-sunk:         #EBE6D8;
  --bg-inverse:      var(--ink);
  --text:            var(--ink);
  --text-muted:      var(--ink-60);
  --text-subtle:     var(--ink-40);
  --text-inverse:    var(--paper);
  --border-hairline: rgba(28, 31, 27, 0.18);
  --border-strong:   rgba(28, 31, 27, 0.32);
  --brand:           var(--fjord);
  --brand-on:        var(--paper);
  --accent:          var(--tegl);
  --warn:            var(--tegl);

  /* --- Type ---------------------------------------------------------- */
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-sans:    'Instrument Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale — 1rem = 16px baseline */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.75rem;   /* 28 */
  --fs-2xl:  2.25rem;   /* 36 */
  --fs-3xl:  3rem;      /* 48 */
  --fs-4xl:  4rem;      /* 64 */
  --fs-5xl:  5.5rem;    /* 88 — hero display */

  --lh-tight:  1.08;
  --lh-snug:   1.2;
  --lh-body:   1.55;
  --lh-loose:  1.7;

  --tracking-label: 0.12em;
  --tracking-tight: -0.015em;   /* display */
  --tracking-body:  0;

  /* --- Space — 4px baseline ------------------------------------------ */
  --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;

  /* --- Radii --------------------------------------------------------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;

  /* --- Shadows ------------------------------------------------------- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(28, 31, 27, 0.04);
  --shadow-md:   0 8px 24px -12px rgba(28, 31, 27, 0.12);

  /* --- Motion -------------------------------------------------------- */
  --ease:         cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-micro:    240ms;
  --dur-layout:   400ms;
  --dur-page:     600ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro:  0ms;
    --dur-layout: 0ms;
    --dur-page:   0ms;
  }
}

/* ==========================================================================
   Primitive type classes — used by previews & kits
   ========================================================================== */

.ns-display {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--text);
}

.ns-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
}

.ns-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.ns-mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0;
  color: var(--text-muted);
}

/* Minimal reset for preview frames */
.ns-reset, .ns-reset * { box-sizing: border-box; }
.ns-reset { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); }
.ns-reset h1, .ns-reset h2, .ns-reset h3, .ns-reset h4, .ns-reset p { margin: 0; }
.ns-reset a { color: inherit; text-decoration: none; }
.ns-reset button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.ns-reset img, .ns-reset svg { display: block; max-width: 100%; }