/* ============================================================
   Jakub Waluś — Design System
   Core color & type foundations.
   Loaded as: <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* ---------- Webfonts ----------
   Display: Newsreader (editorial, warm, with italics)
   Body / UI: Geist (clean, modern, Polish-friendly)
   Mono: JetBrains Mono
   These are pulled from Google Fonts as the project does not
   ship licensed brand fonts yet (see README — font flag).
*/
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=Geist:wght@300..700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------------- Color: brand core ---------------- */
  --sage-50:  #F1F3EA;   /* lightest tint — wash backgrounds */
  --sage-100: #E4E8DA;   /* soft chips, dividers on cream */
  --sage-200: #C9D2B6;   /* secondary surface, hover ghost */
  --sage-300: #A8B89A;   /* PRIMARY brand sage */
  --sage-400: #8A9B79;   /* hover / pressed primary */
  --sage-500: #6C7E5C;   /* deep sage — secondary text on light */
  --sage-700: #495640;   /* forest, on-cream text */
  --sage-900: #2C3527;   /* deepest — display headings on cream */

  /* ---------------- Color: warm neutrals ---------------- */
  --cream-50:  #FBF8F1;   /* page bg, lightest */
  --cream-100: #F4EFE6;   /* PRIMARY page surface */
  --cream-200: #E9E2D2;   /* card edge, subtle divider */
  --cream-300: #D7CDB6;   /* keylines, muted chips */
  --ink-700:   #3C3A33;   /* secondary text */
  --ink-900:   #1E1C18;   /* primary body text */

  /* ---------------- Color: accents ---------------- */
  --clay-400:  #D6967A;   /* warm clay — gentle accent */
  --clay-500:  #C97B5E;   /* clay — for CTAs that need warmth */
  --gold-500:  #B89456;   /* deep gold — quotes, small flourishes */

  /* ---------------- Color: semantic ---------------- */
  --success: #6C8E55;    /* habit-streak / progress */
  --warning: #C9A55C;    /* gentle nudge — not alarm */
  --danger:  #B5564A;    /* used sparingly, never bright red */
  --info:    var(--sage-500);

  /* ---------------- Color: tokens (named roles) ---------------- */
  --bg-page:        var(--cream-100);
  --bg-elevated:    var(--cream-50);
  --bg-sage:        var(--sage-300);
  --bg-sage-soft:   var(--sage-100);
  --bg-deep:        var(--sage-900);

  --fg-1:           var(--ink-900);     /* primary text */
  --fg-2:           var(--ink-700);     /* secondary text */
  --fg-3:           var(--sage-500);    /* tertiary / metadata */
  --fg-on-sage:     var(--cream-50);    /* text on sage primary */
  --fg-on-deep:     var(--cream-100);   /* text on deep forest */

  --border-1:       var(--cream-200);
  --border-2:       var(--cream-300);
  --border-deep:    var(--sage-700);

  --accent:         var(--sage-700);
  --accent-warm:    var(--clay-500);
  --accent-quiet:   var(--gold-500);

  /* ---------------- Type: families ---------------- */
  --font-display: "Newsreader", "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------------- Type: scale ----------------
     Editorial scale — generous line-heights, optical sizes.
  */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.18em;

  /* ---------------- Spacing ---------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------------- Radius ---------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;     /* card default */
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ---------------- Shadows ----------------
     Soft, low-saturation — never harsh. Layered on warm bg.
  */
  --shadow-xs: 0 1px 2px rgba(60, 58, 51, 0.05);
  --shadow-sm: 0 2px 6px rgba(60, 58, 51, 0.06), 0 1px 2px rgba(60, 58, 51, 0.04);
  --shadow-md: 0 8px 24px rgba(60, 58, 51, 0.08), 0 2px 6px rgba(60, 58, 51, 0.05);
  --shadow-lg: 0 20px 48px rgba(44, 53, 39, 0.12), 0 6px 14px rgba(44, 53, 39, 0.06);
  --shadow-inset: inset 0 0 0 1px var(--border-1);

  /* ---------------- Motion ---------------- */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:  140ms;
  --dur-med:   240ms;
  --dur-slow:  420ms;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--sage-900);
  font-weight: 400;          /* serif sits at regular */
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
  font-optical-sizing: auto;
}

h1 { font-size: var(--fs-4xl); line-height: 1.02; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl);  line-height: var(--lh-snug); }
h5 { font-size: var(--fs-lg);  line-height: var(--lh-snug); }
h6 {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Editorial italic — a hallmark of the brand voice. */
.display-italic,
h1 em, h2 em, h3 em {
  font-style: italic;
  font-family: var(--font-display);
  color: var(--sage-700);
}

p {
  margin: 0;
  color: var(--fg-1);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--fg-2);
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--sage-500);
}

small, .small { font-size: var(--fs-sm); color: var(--fg-2); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.94em; }

a {
  color: var(--sage-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--sage-200);
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--sage-900);
  text-decoration-color: var(--sage-500);
}

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

::selection {
  background: var(--sage-200);
  color: var(--sage-900);
}