/* =====================================================================
   Astaxanthin-Edu Design System — Foundations
   ---------------------------------------------------------------------
   Salmon × Green natural-science palette for a Czech educational
   platform aimed at nutritional advisors (výživoví poradci).
   ===================================================================== */

/* --- FONTS ----------------------------------------------------------- */
/* Primary: Fraunces is overused — we use Newsreader (variable serif) for
   editorial/scholarly headings, and Inter Tight for UI/body. Both are
   Google Fonts, swap-friendly, and feel scientific yet warm. */

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

:root {
  /* ===== COLOR TOKENS ============================================== */

  /* Salmon / Astaxanthin red — the hero pigment */
  --salmon-50:  #fff4ef;
  --salmon-100: #ffe3d6;
  --salmon-200: #ffc7ad;
  --salmon-300: #ffa583;
  --salmon-400: #fb8163;   /* primary salmon */
  --salmon-500: #ed5d40;
  --salmon-600: #d44226;   /* deep astaxanthin */
  --salmon-700: #ad301a;
  --salmon-800: #7e2113;
  --salmon-900: #4d130a;

  /* Green / Algae — paired natural tone */
  --algae-50:  #f1f6f0;
  --algae-100: #dde9d9;
  --algae-200: #b9d2b0;
  --algae-300: #8eb583;
  --algae-400: #5f9359;   /* primary algae green */
  --algae-500: #3f7841;
  --algae-600: #2e5e33;   /* deep forest */
  --algae-700: #234828;
  --algae-800: #18321c;
  --algae-900: #0d1c11;

  /* Sand / Neutrals — warm, paper-like */
  --sand-50:  #fbf8f3;     /* page background */
  --sand-100: #f4ede1;
  --sand-200: #e8dcc7;
  --sand-300: #d3c2a4;
  --sand-400: #a89878;
  --sand-500: #7a6c52;
  --sand-600: #574c39;
  --sand-700: #3b3327;
  --sand-800: #251f17;
  --sand-900: #14110c;

  /* Pure white & ink */
  --white: #ffffff;
  --ink:   #1a1812;        /* near-black with warmth */

  /* Semantic — surfaces */
  --bg:           var(--sand-50);
  --bg-elevated:  var(--white);
  --bg-muted:     var(--sand-100);
  --bg-inverse:   var(--algae-700);
  --bg-accent:    var(--salmon-50);

  /* Semantic — foreground */
  --fg-1:         var(--ink);          /* primary text */
  --fg-2:         var(--sand-700);     /* secondary text */
  --fg-3:         var(--sand-500);     /* tertiary / captions */
  --fg-4:         var(--sand-400);     /* disabled / hints */
  --fg-on-dark:   var(--sand-50);
  --fg-on-accent: var(--white);

  /* Semantic — brand accents */
  --accent:        var(--salmon-400);
  --accent-hover:  var(--salmon-500);
  --accent-press:  var(--salmon-600);
  --accent-soft:   var(--salmon-100);

  --secondary:        var(--algae-400);
  --secondary-hover:  var(--algae-500);
  --secondary-press:  var(--algae-600);
  --secondary-soft:   var(--algae-100);

  /* Semantic — status */
  --success: #3f7841;
  --warning: #c98a1a;
  --danger:  #b8341d;
  --info:    #3a6b8a;

  /* Borders */
  --border-subtle: rgba(26, 24, 18, 0.08);
  --border-soft:   rgba(26, 24, 18, 0.14);
  --border-strong: rgba(26, 24, 18, 0.28);
  --border-accent: var(--salmon-300);

  /* ===== TYPE ====================================================== */

  --font-serif: "Newsreader", "Source Serif Pro", Georgia, serif;
  --font-sans:  "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

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

  /* Type scale (Major Third 1.250) */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.45;
  --lh-relaxed:  1.6;
  --lh-loose:    1.8;

  --tr-tight:    -0.02em;
  --tr-snug:     -0.01em;
  --tr-normal:   0;
  --tr-wide:     0.04em;
  --tr-display:  -0.025em;

  /* ===== SPACING / RADIUS / SHADOW ================================= */

  --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;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(26, 24, 18, 0.05);
  --shadow-sm: 0 2px 6px rgba(26, 24, 18, 0.06), 0 1px 2px rgba(26, 24, 18, 0.04);
  --shadow-md: 0 8px 20px rgba(26, 24, 18, 0.08), 0 2px 4px rgba(26, 24, 18, 0.04);
  --shadow-lg: 0 18px 40px rgba(26, 24, 18, 0.12), 0 4px 10px rgba(26, 24, 18, 0.06);
  --shadow-glow-salmon: 0 12px 30px rgba(251, 129, 99, 0.28);
  --shadow-glow-algae:  0 12px 30px rgba(95, 147, 89, 0.22);
  --shadow-inner: inset 0 1px 2px rgba(26, 24, 18, 0.06);

  /* ===== MOTION ==================================================== */

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1.1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);

  --dur-fast:   140ms;
  --dur-medium: 240ms;
  --dur-slow:   420ms;

  /* ===== LAYOUT ==================================================== */

  --container-narrow: 720px;
  --container-base:   1080px;
  --container-wide:   1280px;
}

/* =====================================================================
   SEMANTIC TYPE — drop-in classes / element defaults
   ===================================================================== */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  background: var(--bg);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--salmon-600);
}

.h-display, h1.display {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-48), 6vw, var(--fs-72));
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-48);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-36);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  color: var(--fg-1);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.lead {
  font-family: var(--font-serif);
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  font-style: italic;
  color: var(--fg-2);
}

.small {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.caption {
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--sand-100);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  color: var(--sand-700);
}

a {
  color: var(--salmon-600);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--salmon-700); }

::selection { background: var(--salmon-200); color: var(--ink); }