/* =============================================================
   Korak — brand.css
   Single source of truth for the public website's design tokens:
   palette, typography, and spacing. Link this FIRST in <head> on
   every page (before any page-specific <style>):

       <link rel="stylesheet" href="/brand.css">

   Palette: "Nebo i borovina" — dark mode ("noć u šumi pored mora").
   Mirrors lib/core/constants/app_colors.dart. Keep the two in sync.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Figtree:wght@300;400;500&display=swap');

:root {
  /* ---- Surfaces ---------------------------------------------------- */
  --bg: #131C1A;                          /* background dark — "noć u šumi" */
  --surface: rgba(255, 255, 255, 0.04);   /* cards / panels */
  --surface-strong: rgba(255, 255, 255, 0.06);

  /* ---- Text (three tiers, same tonal family) ---------------------- */
  --text: #E1E3DD;          /* primary — topla bela */
  --text-dim: #BFC9C2;      /* secondary — sivo-zelena */
  --text-muted: #899389;    /* tertiary — tamna magla */

  /* ---- Brand colours --------------------------------------------- */
  --borovina: #9DC8C0;       /* primary (dark mode) */
  --borovina-deep: #34635D;  /* primary (logo upper stroke start) */
  --borovina-light: #557F77; /* logo upper stroke end */
  --nebo: #B5CCDF;           /* secondary (dark mode) */
  --nebo-light: #B0C8DA;     /* logo lower stroke end */
  --amber: #E8B883;          /* tertiary (dark mode) */

  /* ---- Borders ---------------------------------------------------- */
  --border: rgba(225, 227, 221, 0.10);
  --border-subtle: #2C3633;

  /* ---- Legacy aliases (older pages referenced --teal/--gold) ------
     Mapped onto the new palette so existing CSS keeps working. ------ */
  --teal: var(--borovina);
  --teal-bright: var(--borovina);
  --gold: var(--amber);
  --gold-light: var(--amber);

  /* ---- Typography ------------------------------------------------- */
  --font-head: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Vertical rhythm — two deliberate tiers --------------------- */
  /* --gap-section: between distinct blocks (e.g. logo↔wordmark, slogan↔badge). */
  /* --gap-bound:   between elements that belong together (e.g. wordmark↔its slogan). */
  --gap-section: clamp(1.5rem, 3vw, 3rem);
  --gap-bound: clamp(0.85rem, 1.8vw, 1.4rem);

  /* ---- Horizontal rhythm ----------------------------------------- */
  --page-padding: clamp(1.5rem, 5vw, 4rem);
}

/* Base typography — body in Figtree, headings in Manrope.
   Pages may still override locally, but this gives a consistent default. */
body { font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); }
