/* ============================================================
   Helgod — Colors & Type
   "Hel god" = wholly good. Raw, honest, Nordic.
   ============================================================ */

/* ---------- Webfonts (self-host these in fonts/) ---------- */
/* PRIMARY DISPLAY: Fraunces — high-contrast serif, butcher-shop editorial feel.
   PRIMARY TEXT:    Söhne / GT America — fallback Inter (set up here).
   MONO/LABEL:      JetBrains Mono — used very sparingly for spec/labels.
   Norwegian shop signage often pairs a strong serif with a quiet grotesk;
   that's the spirit here. */

@font-face {
  font-family: "Fraunces";
  src: url("./fonts/Fraunces-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("./fonts/Fraunces-Italic-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   COLORS
   ============================================================ */
:root {
  /* ---------- Brand core ---------- */
  --skog-900: #142117;   /* Dyp skog — deepest forest, near-black green */
  --skog-800: #1f3527;   /* Skog — primary brand green */
  --skog-700: #2d4a37;   /* Skog mid */
  --skog-500: #4d6b53;   /* Mossy mid-green */
  --skog-300: #9cb29c;   /* Lichen */
  --skog-100: #d8e1d3;   /* Pale moss tint */

  --okseblod-900: #4a1414;  /* Dried blood — only in tiny accents */
  --okseblod-700: #7a1f1f;  /* Oxblood / raw — primary red */
  --okseblod-500: #a62828; /* Bright raw — for sale tags, urgent */
  --okseblod-200: #e8c7c0; /* Pale raw tint */

  --rav-700: #8b5a2b;    /* Amber — bone, broth */
  --rav-500: #c08a4d;    /* Mid amber */
  --rav-200: #e9d4b5;    /* Pale amber */

  /* ---------- Paper / neutrals (warm, slightly off-white) ---------- */
  --papir-50:  #faf7f0;  /* Newsprint cream — primary background */
  --papir-100: #f3ecdf;  /* Manila — secondary surface */
  --papir-200: #e8dec9;  /* Aged paper */
  --papir-300: #d4c8a8;  /* Worn edge */

  /* ---------- Ink (warm-tinted neutrals, not pure black) ---------- */
  --blekk-900: #1a1714;  /* Ink — primary text */
  --blekk-800: #2c2722;
  --blekk-600: #5a4f44;  /* Secondary text */
  --blekk-400: #8a7d6e;  /* Tertiary, captions */
  --blekk-200: #c4b8a4;  /* Hairline borders */
  --blekk-100: #e0d6c2;  /* Soft dividers */

  /* ---------- Pure utilities ---------- */
  --hvit: #ffffff;
  --svart: #0a0907;

  /* ---------- Semantic ---------- */
  --bg:           var(--papir-50);
  --bg-elevated:  var(--hvit);
  --bg-sunken:    var(--papir-100);
  --bg-inverse:   var(--skog-900);

  --fg:           var(--blekk-900);
  --fg-muted:     var(--blekk-600);
  --fg-subtle:    var(--blekk-400);
  --fg-inverse:   var(--papir-50);

  --accent:       var(--skog-800);
  --accent-hover: var(--skog-900);
  --accent-press: var(--skog-900);
  --accent-fg:    var(--papir-50);

  --raw:          var(--okseblod-700);  /* "raw" red — used for tags, sale, urgent */
  --raw-fg:       var(--papir-50);

  --hairline:     var(--blekk-200);
  --divider:      var(--blekk-100);

  --success:      #3f6b4c;
  --warning:      #b8842b;
  --danger:       var(--okseblod-700);

  /* ============================================================
     TYPOGRAPHY — base
     ============================================================ */
  --font-display: "Fraunces", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-text:    "Inter", "Söhne", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Display variation axes (Fraunces) */
  --fraunces-display-tight: "opsz" 144, "SOFT" 0,   "WONK" 1;
  --fraunces-display-soft:  "opsz" 144, "SOFT" 100, "WONK" 0;
  --fraunces-text:          "opsz" 14,  "SOFT" 30,  "WONK" 0;

  /* Type scale (modular, ~1.25 step at body, looser at display) */
  --fs-overline: 0.75rem;   /* 12px */
  --fs-caption:  0.8125rem; /* 13px */
  --fs-small:    0.875rem;  /* 14px */
  --fs-body:     1rem;      /* 16px */
  --fs-lead:     1.125rem;  /* 18px */
  --fs-h6:       1.25rem;   /* 20 */
  --fs-h5:       1.5rem;    /* 24 */
  --fs-h4:       2rem;      /* 32 */
  --fs-h3:       2.625rem;  /* 42 */
  --fs-h2:       3.5rem;    /* 56 */
  --fs-h1:       4.75rem;   /* 76 */
  --fs-display:  6.5rem;    /* 104 */

  /* Line heights */
  --lh-tight: 0.95;
  --lh-snug:  1.08;
  --lh-cozy:  1.25;
  --lh-body:  1.55;
  --lh-loose: 1.75;

  /* Letter spacing */
  --ls-display: -0.025em;
  --ls-heading: -0.012em;
  --ls-body:    0em;
  --ls-overline: 0.14em;
  --ls-button:   0.06em;

  /* ============================================================
     SPACE / RADII / SHADOWS / BORDERS
     ============================================================ */
  --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;

  /* Helgod uses MINIMAL rounding. Square, honest corners.
     Pills are reserved for product tags / chips only. */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;

  /* Borders are thin and warm — never pure black */
  --border-hair:   1px solid var(--blekk-200);
  --border-soft:   1px solid var(--blekk-100);
  --border-strong: 1.5px solid var(--blekk-900);

  /* Shadows are restrained, never blurry/glowy.
     Heavy lift on the "card" feel comes from borders + paper texture. */
  --shadow-1: 0 1px 0 rgba(26,23,20,0.05);
  --shadow-2: 0 1px 2px rgba(26,23,20,0.06), 0 1px 0 rgba(26,23,20,0.04);
  --shadow-3: 0 6px 16px -8px rgba(26,23,20,0.18), 0 1px 0 rgba(26,23,20,0.04);
  --shadow-lift: 0 24px 48px -24px rgba(26,23,20,0.28);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   These are the "brand" type styles — apply by class.
   ============================================================ */

.h-display {
  font-family: var(--font-display);
  font-feature-settings: var(--fraunces-display-tight);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg);
}

.h-h1 {
  font-family: var(--font-display);
  font-feature-settings: var(--fraunces-display-tight);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
}
.h-h1 em, .h-h1 i { font-style: italic; font-weight: 500; }

.h-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
}

.h-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-cozy);
  letter-spacing: var(--ls-heading);
}

.h-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-cozy);
  letter-spacing: var(--ls-heading);
}

.h-h5 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: var(--lh-cozy);
  letter-spacing: var(--ls-heading);
}

.h-h6 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-h6);
  line-height: var(--lh-cozy);
}

.h-lead {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

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

.h-small {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

.h-caption {
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  line-height: var(--lh-cozy);
  color: var(--fg-subtle);
}

.h-overline {
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  line-height: 1;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}

.h-mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0;
}

/* "Editorial" italic — Fraunces italic is the brand voice for accents.
   Use in pull-quotes and word-emphasis in headlines. */
.h-italic-emph {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}

/* Default element styles — apply globally if you import this file */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1 { font: 600 var(--fs-h1)/var(--lh-snug) var(--font-display); letter-spacing: var(--ls-display); margin: 0; }
h2 { font: 600 var(--fs-h2)/var(--lh-snug) var(--font-display); letter-spacing: var(--ls-heading); margin: 0; }
h3 { font: 600 var(--fs-h3)/var(--lh-cozy) var(--font-display); letter-spacing: var(--ls-heading); margin: 0; }
h4 { font: 600 var(--fs-h4)/var(--lh-cozy) var(--font-display); letter-spacing: var(--ls-heading); margin: 0; }
h5 { font: 600 var(--fs-h5)/var(--lh-cozy) var(--font-text); margin: 0; }
h6 { font: 600 var(--fs-h6)/var(--lh-cozy) var(--font-text); margin: 0; }
p  { margin: 0 0 1em; }
small { font-size: var(--fs-small); color: var(--fg-muted); }
code, kbd { font-family: var(--font-mono); font-size: 0.875em; }

::selection {
  background: var(--skog-800);
  color: var(--papir-50);
}