/* ==========================================================================
   mācības.lv Design System — Tokens
   Soft Spring Friendly · warm, human, conversion-first
   ========================================================================== */

/* --- Google Fonts import ------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ======================================================================
     COLORS — "Soft Spring"
     Rule 1: NEVER #FFFFFF. Rule 2: NEVER #000000.
     ====================================================================== */

  /* Backgrounds */
  --bg-primary:  #FAF7F2;  /* main page, creamy */
  --bg-elevated: #FFFDF9;  /* cards, elevated surfaces */
  --bg-warm:     #F5EFE6;  /* alternate section band, darker cream */

  /* Accents */
  --accent-mint:        #7DD3C0;  /* primary brand accent */
  --accent-mint-soft:   #B8E6DB;  /* hover states, tinted bg */
  --accent-peach:       #FFB085;  /* primary CTA button */
  --accent-peach-soft:  #FFD4B8;  /* peach hover, avatar rings */
  --accent-butter:      #FFD980;  /* highlights, badges */
  --accent-butter-soft: #FFE9B3;

  /* Text — warm dark blue-black, never pure black */
  --text-primary:   #1A1F2E;
  --text-secondary: #4A5160;
  --text-muted:     #7A8294;
  --text-on-peach:  #1A1F2E; /* text on peach button — BLACK, not white */

  /* Borders — subtle, almost invisible */
  --border-subtle:  #EDE6DA;
  --border-default: #E0D7C6;

  /* Shadows — soft, warm, never pure black */
  --shadow-sm:   0 2px 8px   rgba(74, 60, 40, 0.06);
  --shadow-md:   0 8px 24px  rgba(74, 60, 40, 0.08);
  --shadow-lg:   0 20px 48px rgba(74, 60, 40, 0.10);
  --shadow-ring: 0 0 0 4px   rgba(125, 211, 192, 0.15); /* mint focus ring */

  /* Gradient — "Warm Sunrise" (use ONCE per page, max) */
  --gradient-warm-sunrise: radial-gradient(
    ellipse at 85% 15%,
    #9FE5D5 0%,
    #FFD980 22%,
    #FFB085 50%,
    #B8A4E3 100%
  );
  /* "Electric Dusk" — BANNED on landing page. Blog covers / OG images only. */
  --gradient-electric-dusk: radial-gradient(
    ellipse at 85% 15%,
    #FFB085 0%,
    #E5533D 30%,
    #C94F9E 60%,
    #1A1F2E 100%
  );

  /* ======================================================================
     TYPOGRAPHY
     ====================================================================== */

  --font-display: 'Fraunces', Georgia, serif;
  --font-italic:  'Fraunces', Georgia, serif;
  --font-body:    'Inter', -apple-system, system-ui, sans-serif;

  /* Scale — fluid, H1 is LARGE but never aggressive */
  --text-hero: clamp(2.5rem, 5vw + 1rem, 4.5rem);   /* 40–72px */
  --text-h1:   clamp(2rem, 3vw + 1rem, 3.25rem);    /* 32–52px */
  --text-h2:   clamp(1.5rem, 2vw + 0.75rem, 2.25rem); /* 24–36px */
  --text-h3:   1.375rem;  /* 22px */
  --text-body: 1.0625rem; /* 17px — larger than default for readability */
  --text-sm:   0.9375rem; /* 15px */
  --text-xs:   0.8125rem; /* 13px */

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

  --lh-display: 1.1;
  --lh-tight:   1.3;
  --lh-body:    1.65;

  /* ======================================================================
     SPACING — 4px grid
     ====================================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* Containers */
  --container-max:    1200px;
  --container-narrow: 840px;

  /* ======================================================================
     RADII — everything is rounded; 4–8px are FORBIDDEN
     ====================================================================== */
  --radius-sm:   12px;   /* small buttons, tags */
  --radius-md:   16px;   /* standard cards */
  --radius-lg:   24px;   /* large cards, hero elements */
  --radius-xl:   32px;   /* extra-large sections */
  --radius-full: 9999px; /* avatars, pill buttons */

  /* ======================================================================
     MOTION — subtle, never bouncy
     ====================================================================== */
  --ease-soft:       cubic-bezier(0.25, 0.8, 0.25, 1);
  --duration-quick:  200ms;
  --duration-normal: 300ms;
}

/* ==========================================================================
   SEMANTIC BASE — apply to bare HTML elements so tokens carry through
   ========================================================================== */

html {
  background: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg-primary);
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);     /* 500 — never 700+ */
  line-height: var(--lh-display);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
h3 { font-size: var(--text-h3); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }

/* Keyword emphasis INSIDE a heading — italic serif */
h1 em, h2 em, h3 em, .hero__title em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--text-primary);
}

p {
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
  line-height: var(--lh-body);
}

a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--duration-quick) var(--ease-soft);
}
a:hover { color: var(--accent-mint); }
a.btn-primary:hover, a.btn-ghost:hover { color: inherit; }

small, .text-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  /* NEVER text-transform: uppercase + letter-spacing on labels */
}

code, pre, kbd {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9375em;
  background: var(--bg-warm);
  padding: 0.125em 0.375em;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--accent-mint-soft);
  color: var(--text-primary);
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-ring);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   MOTION — respect reduced-motion preference
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}