/* ============================================
   TRAILbuddy · Design Tokens
   Zdroj pravdy pre farby, typografiu, spacing.
   Zmena tu = zmena v celej appke.
   ============================================ */

:root {
  /* ===== COLOR: Earth (pozadie, layers) ===== */
  --earth:        #1a1410;
  --earth-2:      #221a14;
  --earth-3:      #2d2219;
  --earth-4:      #3a2d22;

  /* ===== COLOR: Bone (text, foreground) ===== */
  --bone:         #f4ede0;
  --bone-dim:     #c9bfae;
  --bone-dimmer:  #8a7f6d;
  --bone-ghost:   #5a5145;

  /* ===== COLOR: Signal (primary action, accent) ===== */
  --signal:       #ff5a1f;
  --signal-2:     #ffb347;
  --signal-dim:   #b8421a;

  /* ===== COLOR: Nature (semantic) ===== */
  --moss:         #5a6b3a;
  --moss-2:       #7a8b52;
  --trail:        #8b6f47;
  --trail-2:      #a68a62;

  /* ===== COLOR: Status ===== */
  --danger:       #d63b2a;
  --danger-dim:   rgba(214, 59, 42, 0.15);
  --warning:      #e8a83a;
  --success:      #4a7c3a;
  --success-dim:  rgba(74, 124, 58, 0.15);
  --info:         #5a8bb8;

  /* ===== COLOR: Surface (cards, inputs, overlays) ===== */
  --surface:          rgba(244, 237, 224, 0.04);
  --surface-hover:    rgba(244, 237, 224, 0.08);
  --surface-active:   rgba(244, 237, 224, 0.12);
  --border:           rgba(244, 237, 224, 0.08);
  --border-strong:    rgba(244, 237, 224, 0.20);

  /* ===== TYPOGRAPHY ===== */
  --font-display: 'Archivo Black', 'Impact', sans-serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Font sizes — rem scale (base 16px) */
  --fs-2xs:   0.5625rem;  /*  9px */
  --fs-xs:    0.6875rem;  /* 11px */
  --fs-sm:    0.8125rem;  /* 13px */
  --fs-base:  0.9375rem;  /* 15px */
  --fs-md:    1.0625rem;  /* 17px */
  --fs-lg:    1.25rem;    /* 20px */
  --fs-xl:    1.625rem;   /* 26px */
  --fs-2xl:   2.125rem;   /* 34px */
  --fs-3xl:   3rem;       /* 48px */
  --fs-4xl:   4rem;       /* 64px */
  --fs-5xl:   6rem;       /* 96px */

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-wider:   0.1em;

  /* ===== 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;

  /* ===== LAYOUT ===== */
  --max-width:       1400px;
  --max-width-read:  720px;
  --header-height:   72px;
  --bottom-nav-h:    64px;

  /* ===== RADII ===== */
  --r-xs:   3px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* ===== SHADOWS ===== */
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md:  0 6px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.4);
  --shadow-xl:  0 20px 60px rgba(0, 0, 0, 0.5);

  /* ===== TRANSITIONS ===== */
  --t-fast:   120ms ease-out;
  --t-normal: 200ms ease-out;
  --t-slow:   320ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
  --t-bouncy: 400ms cubic-bezier(0.2, 0.9, 0.3, 1.3);

  /* ===== Z-INDEX ===== */
  --z-base:     1;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
  --z-grain:    1000;
}

/* Dark mode is the default. Light mode neskôr ak bude treba. */