/* ==========================================================================
   Holi Health — Colors & Typography
   Source: Brand Book (Figma), extracted Oct 2025
   ========================================================================== */

/* -------------------- FONTS ----------------------------------------------- */
/* DM Sans (titles) — Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');
/* Inter (body) — Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
/* Sfizia — proprietary, licensed. Regular + Regular Italic served locally. */
@font-face {
  font-family: "Sfizia";
  src: url("fonts/sfizia-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sfizia";
  src: url("fonts/sfizia-regular-italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- CORE BRAND — Violets ---------- */
  --holi-plum-900:    #1E1043; /* deepest plum */
  --holi-plum-800:    #2F2646; /* "czarny fiolet" backgrounds */
  --holi-plum-700:    #442E7D; /* Śliwkowy fiolet — PRIMARY brand color */
  --holi-plum-600:    #6647B8;
  --holi-violet-500:  #7E5CD7; /* Żywy fiolet — SECONDARY / accent */
  --holi-violet-400:  #8C6AE6;
  --holi-violet-300:  #9E7DF7;
  --holi-violet-200:  #B092FF; /* used on ciemne tła */
  --holi-violet-100:  #C0A9FF;
  --holi-violet-050:  #D6C6FF;
  --holi-violet-tint: #BAA2F9; /* sygnet over deep backgrounds */

  /* ---------- WARM NEUTRALS — Beż / Piasek ---------- */
  --holi-sand-900:  #2E271A;
  --holi-sand-700:  #796A4D;
  --holi-sand-500:  #A38F67;
  --holi-sand-400:  #B3A27E;
  --holi-sand-300:  #C5B696;
  --holi-sand-200:  #DACDB1;
  --holi-sand-150:  #E8DFCD; /* card fills */
  --holi-sand-100:  #EFE5D9; /* block fills (photos) */
  --holi-cream:     #F0EDE8; /* soft bg */
  --holi-bone:      #F7F5F2; /* softest bg */
  --holi-white:     #FFFFFF;

  /* ---------- EARTH / BROWNS — Edukacja, nauka ---------- */
  --holi-earth-900: #39170B;
  --holi-earth-700: #623524;
  --holi-earth-500: #7D4C3A;
  --holi-earth-400: #9B6E5E;
  --holi-earth-300: #BB8F7F;
  --holi-earth-200: #D8B0A1;
  --holi-earth-100: #EECFC3;

  /* ---------- REDS — Dietetyka / żywienie ---------- */
  --holi-red-900: #500003;
  --holi-red-700: #6F0D11;
  --holi-red-500: #91272B;
  --holi-red-400: #AF4E52;
  --holi-red-300: #CD6D71;
  --holi-red-200: #E7989B;
  --holi-red-100: #EFB9BB;

  /* ---------- BLUES — Medycyna ---------- */
  --holi-blue-900: #001A46; /* podcast tile */
  --holi-blue-800: #0C182E;
  --holi-blue-700: #212C40; /* "grafit-blue" deep */
  --holi-blue-500: #98BEFF; /* akcent na ciemnych tłach */
  --holi-blue-200: #D9E7FF;
  --holi-blue-100: #E7F0FF;

  /* ---------- GRAPHITE — Typography & UI ---------- */
  --holi-ink:       #1B1F29; /* primary text on light */
  --holi-ink-80:    #2C3041;
  --holi-ink-60:    rgba(27,31,41,0.60);
  --holi-ink-40:    rgba(27,31,41,0.40);
  --holi-ink-20:    rgba(27,31,41,0.12);
  --holi-on-dark:   #FFFFFF;

  /* ---------- SEMANTIC ---------- */
  --bg:        var(--holi-white);
  --bg-soft:   var(--holi-bone);
  --bg-warm:   var(--holi-cream);
  --bg-deep:   var(--holi-plum-700);
  --fg:        var(--holi-ink);
  --fg-muted:  var(--holi-ink-60);
  --fg-on-dark:var(--holi-on-dark);
  --accent:    var(--holi-violet-500);
  --accent-deep:var(--holi-plum-700);
  --border:    rgba(27,31,41,0.12);
  --border-strong: var(--holi-ink);

  /* ---------- RADII / SHADOW / SPACING (8-pt grid) ---------- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;   /* cards, photos — most common in Figma */
  --radius-xl: 32px;
  --radius-pill: 999px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;

  --shadow-sm: 0 1px 2px rgba(27,31,41,0.04), 0 1px 3px rgba(27,31,41,0.06);
  --shadow-md: 0 6px 20px rgba(27,31,41,0.08);
  --shadow-lg: 0 18px 48px rgba(27,31,41,0.14);
  /* Glass: used on data overlays in the brand book */
  --glass-bg: rgba(255,255,255,0.4);
  --glass-bg-dark: rgba(33,44,64,0.64);
  --glass-blur: blur(16.9px);

  /* ---------- TYPOGRAPHY ---------- */
  --ff-display:  "DM Sans", system-ui, sans-serif;
  --ff-accent:   "Sfizia", Georgia, serif; /* italic accent — licensed brand font */
  --ff-body:     "Inter", system-ui, sans-serif;

  /* Display scale — posters / covers / hero */
  --fs-hero:    160px;  /* BRAND GUIDELINES cover */
  --fs-display: 96px;   /* "Lorem ipsum" posters */
  --fs-h1:      84px;   /* section titles (DM Sans) */
  --fs-h2:      56px;
  --fs-h3:      40px;
  --fs-h4:      32px;
  --fs-title:   24px;
  --fs-body-lg: 24px;   /* body copy on marketing slides */
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12px;

  --lh-tight:   1.0;
  --lh-snug:    1.1;
  --lh-body:    1.67;   /* 40/24 used throughout brand book */
  --lh-ui:      1.4;
}

/* -------------------- BASE ELEMENTS --------------------------------------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  color: var(--fg);
  line-height: var(--lh-snug);
  font-weight: 400;      /* Holi does not bold: Regular / Medium only */
  margin: 0 0 0.4em;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); line-height: 1.0; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

/* Accent italic — pair with DM Sans headings, 2pt larger */
.accent-italic,
em.holi {
  font-family: var(--ff-accent);
  font-style: italic;
  font-weight: 400;
}

p { margin: 0 0 1em; max-width: 70ch; text-wrap: pretty; }

a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0; }

code, pre, .mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
}

/* -------------------- UTILITY --------------------------------------------- */
.holi-bg-cream  { background: var(--holi-cream); }
.holi-bg-bone   { background: var(--holi-bone); }
.holi-bg-sand   { background: var(--holi-sand-150); }
.holi-bg-plum   { background: var(--holi-plum-700); color: var(--fg-on-dark); }
.holi-bg-violet { background: var(--holi-violet-500); color: var(--fg-on-dark); }
.holi-bg-ink    { background: var(--holi-blue-700); color: var(--fg-on-dark); }

.card {
  background: var(--bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}