/* =============================================================
   Solidlab Design System — Colors & Typography
   v1.1 Nordic — April 2026
   ============================================================= */

/* ---------- Fonts ---------- */
/* Geist — brand-supplied variable font (weights 100–900) */
@font-face {
  font-family: 'Geist';
  src: url('./fonts/Geist-VariableFont_wght.ttf') format('truetype-variations'),
       url('./fonts/Geist-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Geist Mono — brand-supplied variable fonts */
@font-face {
  font-family: 'Geist Mono';
  src: url('./fonts/GeistMono-VariableFont_wght.ttf') format('truetype-variations'),
       url('./fonts/GeistMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('./fonts/GeistMono-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('./fonts/GeistMono-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Color tokens (Nordic / Jotun-anchored) ---------- */
:root {
  /* Core palette — never use pure #FFFFFF */
  --oslo:           #4A5A62; /* Jotun 5180 — primary accent */
  --sort:           #0A0A0A; /* dark base */
  --antikkhvit:     #F4F1EA; /* Jotun 1873 — warm off-white */
  --nordic-breeze:  #6B8290; /* Jotun 5452 — midtone */
  --alvesolv:       #8B9BA0; /* Scanox 5982 — secondary text */
  --linbla:         #C9D4D8; /* Jotun 5249 — light divider */
  --antikkgra:      #D5CFC2; /* Jotun 1973 — warm counterweight */
  --fog:            #5A5A5A; /* body secondary */
  --mist:           #8A8A8A; /* tertiary */
  --border-light:   #E8E4DB; /* divider on Antikkhvit */
  --border-dark:    #1F1F1F; /* divider on Sort */

  /* --------- Semantic color tokens --------- */

  /* Light mode — Antikkhvit base */
  --bg:             var(--antikkhvit);
  --bg-warm:        var(--antikkgra);   /* warm call-out */
  --bg-soft:        var(--linbla);      /* soft card/wash */
  --fg:             var(--sort);        /* primary text */
  --fg-secondary:   var(--fog);         /* body secondary */
  --fg-tertiary:    var(--mist);        /* metadata, placeholders */
  --fg-muted:       var(--alvesolv);    /* labels, subtle */
  --accent:         var(--oslo);        /* links, CTAs */
  --accent-hover:   var(--nordic-breeze);
  --divider:        var(--border-light);
  --divider-strong: var(--oslo);

  /* Typography */
  --font-sans:   'Geist', 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --font-mono:   'Geist Mono', 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;

  /* Type scale (1.25 ratio) — px */
  --fs-display:    72px;
  --fs-h1:         48px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-label:      12px;

  /* Line heights */
  --lh-display:    1.0;
  --lh-h1:         1.1;
  --lh-h2:         1.2;
  --lh-h3:         1.3;
  --lh-h4:         1.4;
  --lh-body:       1.6;
  --lh-body-sm:    1.5;
  --lh-label:      1.4;

  /* Letter-spacing */
  --tracking-tight:    -0.02em;   /* large headlines + wordmark */
  --tracking-normal:   0em;
  --tracking-label:    0.08em;    /* mono labels */

  /* Weights */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  /* --------- Spacing (8-pt grid) --------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   16px;
  --space-4:   24px;
  --space-5:   32px;
  --space-6:   48px;
  --space-7:   80px;
  --space-8:   120px;

  /* Layout */
  --content-max:     1280px;
  --grid-columns:    12;
  --grid-gutter:     24px;

  /* Radii — sharp by default */
  --radius-0:    0px;   /* default */
  --radius-sm:   4px;   /* tags, pills only */
  --radius-pill: 999px; /* avatars/status dots use 50% */

  /* Dividers */
  --rule-hairline: 1px;
  --rule-medium:   2px;
  --rule-accent:   3px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;
}

/* ---------- Dark mode (default for hero / primary surfaces) ---------- */
:root.dark,
[data-theme='dark'] {
  --bg:             var(--sort);
  --bg-warm:        #141414;
  --bg-soft:        #111111;
  --fg:             var(--antikkhvit);
  --fg-secondary:   var(--alvesolv);
  --fg-tertiary:    var(--mist);
  --fg-muted:       var(--fog);
  --accent:         var(--oslo);
  --accent-hover:   var(--nordic-breeze);
  --divider:        var(--border-dark);
  --divider-strong: var(--oslo);
}

/* =============================================================
   Semantic element styles — opt-in via the .prose or body scope
   ============================================================= */

.sl-type, .prose {
  font-family: var(--font-sans);
  color: var(--fg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  font-feature-settings: 'ss01', 'cv01', 'cv11';
}

/* Wordmark — always lowercase, bold, tight */
.sl-wordmark {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  text-transform: lowercase;
  font-style: normal;
}

/* Slash label — Geist Mono, Fog/Mist */
.sl-slash {
  font-family: var(--font-mono);
  color: var(--fg-secondary);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}

/* Display & headlines — sentence case, tight tracking on large */
.sl-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}
.sl-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}
.sl-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: balance;
}
.sl-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
  color: var(--fg);
}
.sl-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-semibold);
  color: var(--fg);
}

.sl-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg);
  text-wrap: pretty;
}
.sl-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  text-wrap: pretty;
}
.sl-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--fg-secondary);
}

.sl-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--fg-secondary);
}

.sl-code,
.sl-mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
}

/* Links — Oslo underlined on hover */
.sl-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-in-out),
              color var(--dur-fast) var(--ease-in-out);
}
.sl-link:hover { border-bottom-color: currentColor; }

/* Buttons — sharp, typographic */
.sl-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  padding: 14px 20px;
  border-radius: var(--radius-0);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-in-out),
              color var(--dur-fast) var(--ease-in-out),
              border-color var(--dur-fast) var(--ease-in-out),
              opacity var(--dur-fast) var(--ease-in-out);
}
.sl-btn--primary {
  background: var(--oslo);
  color: var(--antikkhvit);
}
.sl-btn--primary:hover { background: var(--nordic-breeze); }
.sl-btn--secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
}
.sl-btn--secondary:hover { background: var(--fg); color: var(--bg); }
.sl-btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--divider);
}
.sl-btn--ghost:hover { border-color: var(--fg); }

/* Tag / pill — 4px radius max */
.sl-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--divider);
  color: var(--fg-secondary);
}

/* Horizontal rules */
.sl-rule-hairline { height: 1px; background: var(--divider); border: 0; }
.sl-rule-medium   { height: 2px; background: color-mix(in oklab, var(--oslo) 20%, transparent); border: 0; }
.sl-rule-accent   { height: 3px; background: var(--oslo); border: 0; }

/* Focus — accessible and on-brand */
.sl-focusable:focus-visible,
.sl-btn:focus-visible,
.sl-link:focus-visible {
  outline: 2px solid var(--oslo);
  outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}