/* NordicTrend — design tokens (source of truth).
 * Copied VERBATIM from design-system/tokens/*.css. Every later layer references these vars.
 * Font loading is separate: assets/css/fonts.css (self-hosted). */

/* ============================================================ tokens/colors.css */
/* NordicTrend — Color tokens
 * Warm Scandinavian neutrals + a calm evergreen primary + clay sale-red.
 * Base values first, semantic aliases below.
 */
:root {
  /* ---- Warm neutrals (linen → ink) ---- */
  --linen:      #F6F3EE; /* page background */
  --paper:      #FFFFFF; /* cards, surfaces */
  --sand:       #EFEAE1; /* subtle fill / muted surface */
  --sand-deep:  #E4DDD0; /* hover on sand, dividers on paper */
  --line:       #E5DFD4; /* hairline borders */
  --line-soft:  #EFEAE1; /* faint borders on linen */

  --ink:        #1B1A17; /* primary text, near-black */
  --ink-2:      #4B4842; /* secondary text */
  --ink-3:      #8C877C; /* tertiary / placeholder */
  --ink-inv:    #FBFAF7; /* text on dark */

  /* ---- Primary: Nordic evergreen ---- */
  --pine-900:   #16271F;
  --pine-700:   #213830;
  --pine-600:   #284A3D; /* primary */
  --pine-500:   #355C4D;
  --pine-300:   #9FB6AC;
  --pine-100:   #E5EDE8; /* tint surface */
  --pine-050:   #F0F4F1;

  /* ---- Accent: clay (warm secondary / CTA highlight) ---- */
  --clay-600:   #B4502F;
  --clay-500:   #C4452F; /* sale / Rea red */
  --clay-100:   #F7E7DF;

  /* ---- Support: fjord blue (links, info) ---- */
  --fjord-600:  #2E5A6E;
  --fjord-100:  #E2ECF0;

  /* ---- Status ---- */
  --green-600:  #3C7A4E; --green-100: #E4F0E6;
  --amber-600:  #B07A1E; --amber-100: #F6ECD6;
  --red-600:    #B23A2E; --red-100:   #F6E2DF;

  /* ====== Semantic aliases ====== */
  --bg-page:        var(--linen);
  --surface-card:   var(--paper);
  --surface-sunken: var(--sand);
  --surface-tint:   var(--pine-100);

  --text-strong:    var(--ink);
  --text-body:      var(--ink-2);
  --text-muted:     var(--ink-3);
  --text-inverse:   var(--ink-inv);
  --text-link:      var(--fjord-600);

  --border-default: var(--line);
  --border-strong:  var(--sand-deep);

  --brand:          var(--pine-600);
  --brand-hover:    var(--pine-700);
  --brand-press:    var(--pine-900);
  --brand-tint:     var(--pine-100);
  --on-brand:       var(--ink-inv);

  --accent:         var(--clay-500);
  --sale:           var(--clay-500);
  --sale-tint:      var(--clay-100);

  --success:        var(--green-600); --success-tint: var(--green-100);
  --warning:        var(--amber-600); --warning-tint: var(--amber-100);
  --danger:         var(--red-600);   --danger-tint:  var(--red-100);

  --focus-ring:     var(--pine-500);
}

/* ============================================================ tokens/typography.css */
/* NordicTrend — Typography tokens */
:root {
  --font-sans:  'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* Type scale (1.20 ratio, rem) */
  --text-xs:    0.75rem;   /* 12 */
  --text-sm:    0.875rem;  /* 14 */
  --text-base:  1rem;      /* 16 */
  --text-md:    1.125rem;  /* 18 */
  --text-lg:    1.375rem;  /* 22 */
  --text-xl:    1.75rem;   /* 28 */
  --text-2xl:   2.25rem;   /* 36 */
  --text-3xl:   3rem;      /* 48 */
  --text-4xl:   4rem;      /* 64 */

  /* Weights */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* Line heights */
  --lh-tight:   1.05; /* @kind font */
  --lh-snug:    1.2;  /* @kind font */
  --lh-normal:  1.5;  /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Letter spacing */
  --ls-tight:   -0.02em; /* @kind font */
  --ls-snug:    -0.01em; /* @kind font */
  --ls-normal:  0;       /* @kind font */
  --ls-wide:    0.04em;  /* @kind font */
  --ls-caps:    0.12em;  /* @kind font */
}

/* ============================================================ tokens/spacing.css */
/* NordicTrend — Spacing & layout tokens (8px base) */
:root {
  --space-0:   0;
  --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;

  --container:    1240px; /* max content width */
  --container-narrow: 720px;
  --gutter:       24px;
}

/* ============================================================ tokens/effects.css */
/* NordicTrend — Radii, shadows, borders, motion
 * Soft, calm Scandinavian feel: gentle rounding, low-contrast shadows, quiet motion.
 */
:root {
  /* Corner radii */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* Borders */
  --border-hairline: 1px solid var(--border-default);

  /* Shadows — warm-tinted, soft, never harsh */
  --shadow-xs: 0 1px 2px rgba(27, 26, 23, 0.05);
  --shadow-sm: 0 1px 3px rgba(27, 26, 23, 0.06), 0 1px 2px rgba(27, 26, 23, 0.04);
  --shadow-md: 0 4px 16px rgba(27, 26, 23, 0.07), 0 1px 4px rgba(27, 26, 23, 0.05);
  --shadow-lg: 0 12px 36px rgba(27, 26, 23, 0.10), 0 4px 12px rgba(27, 26, 23, 0.06);
  --shadow-focus: 0 0 0 3px rgba(53, 92, 77, 0.30);

  /* Motion — quiet, no bounce */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
}

/* ============================================================ tokens/base.css */
/* NordicTrend — base element defaults (kept minimal; tokens do the work) */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
}

p { margin: 0; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

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