/* =============================================================
   OvdjeS.am — Design System tokens
   Import this file first. Defines color, type, spacing, radii,
   shadow, motion variables + base semantic styles (h1..p, button).
   ============================================================= */

:root {
  /* ---------- COLOR — palette ---------- */
  --ovdje-orange:        #FA960A;  /* primary brand — wordmark, CTAs */
  --ovdje-orange-600:    #E08305;  /* hover / pressed darker */
  --ovdje-orange-200:    #FFD89A;  /* tinted backgrounds */
  --ovdje-orange-50:     #FFF1DC;  /* faintest orange wash */

  --ovdje-ink:           #0F1B24;  /* default text + dark surfaces (meta-theme-color) */
  --ovdje-ink-700:       #2A3540;  /* secondary text on light */
  --ovdje-ink-500:       #5A6671;  /* tertiary text, captions */
  --ovdje-ink-300:       #A9B1B8;  /* placeholders, disabled */

  --ovdje-cream:         #FFF7EC;  /* warm app background */
  --ovdje-cream-200:     #FBEBD2;  /* warmer surfaces, hover tints */
  --ovdje-paper:         #FFFFFF;  /* pure white cards */

  --ovdje-rust:          #F05014;  /* mascot stripe — deep red-orange */
  --ovdje-teal:          #14B4B4;  /* mascot stripe — cool counterpoint */
  --ovdje-teal-700:      #0E8585;
  --ovdje-beagle:        #7A4A22;  /* dog coat brown — illustration */
  --ovdje-beagle-200:    #E6D2BD;

  --ovdje-line:          rgba(15, 27, 36, 0.08);
  --ovdje-line-strong:   rgba(15, 27, 36, 0.16);
  --ovdje-line-on-dark:  rgba(255, 255, 255, 0.10);

  /* ---------- COLOR — semantic ----------
     The semantic role tokens (--surface/--surface-raised/--text/--border/--accent…)
     and the legacy aliases (--fg-*, --bg-*) now live in theme.css so they can flip
     between light / dark / system. This file keeps only theme-independent primitives. */

  /* Status — used sparingly */
  --success:             #2E8B57;
  --danger:              #D7263D;
  --info:                #2A6FDB;
  --warning:             #E08305;

  /* ---------- TYPE — families ---------- */
  --font-display:        'Quicksand', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:           'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:           'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* ---------- TYPE — sizes ---------- */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   40px;
  --text-4xl:   56px;
  --text-5xl:   72px;

  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow:0.08em;

  /* ---------- SPACING (8px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADII ---------- */
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;   /* cards & inputs */
  --radius-xl:    24px;   /* sheets, modals */
  --radius-pill:  9999px; /* buttons, chips */

  /* ---------- SHADOWS ---------- */
  --shadow-sm:    0 1px 2px rgba(15, 27, 36, 0.06);
  --shadow-md:    0 4px 12px rgba(15, 27, 36, 0.08), 0 1px 2px rgba(15, 27, 36, 0.06);
  --shadow-lg:    0 16px 40px rgba(15, 27, 36, 0.12), 0 2px 6px rgba(15, 27, 36, 0.06);
  --shadow-orange:0 24px 60px rgba(250, 150, 10, 0.20);

  /* ---------- MOTION ---------- */
  --ease-warm:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:     150ms;
  --dur-base:     220ms;
  --dur-slow:     360ms;
  --dur-slower:   480ms;

  /* ---------- LAYOUT ---------- */
  --content-max:    1280px;
  --content-prose:  680px;
}

/* =============================================================
   BASE — sensible defaults for any HTML using this system
   ============================================================= */

html, body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =============================================================
   SEMANTIC TYPE — drop in <h1>..<small>, .eyebrow, .lead, code
   ============================================================= */

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 6vw, 56px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 5vw, 40px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 4vw, 32px);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

h5, .h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2);
}

p {
  margin: 0 0 var(--space-4);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  max-width: 60ch;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  text-transform: lowercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ovdje-orange-600);
  margin-bottom: var(--space-3);
}

small, .text-caption {
  font-size: var(--text-sm);
  color: var(--fg-3);
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  color: var(--fg-1);
  padding: 0.1em 0.4em;
  border-radius: 6px;
}

a {
  color: var(--ovdje-orange-600);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-warm), opacity var(--dur-fast) var(--ease-warm);
}
a:hover { border-bottom-color: currentColor; }

/* =============================================================
   BUTTONS — pill-shaped, two variants
   ============================================================= */

.btn {
  --_bg: var(--accent);
  --_fg: var(--text-on-accent);
  --_border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--_border);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-warm),
    transform  var(--dur-fast) var(--ease-warm),
    box-shadow var(--dur-fast) var(--ease-warm);
}
.btn:hover  { background: var(--accent-hover); }
.btn:active { transform: scale(0.98); }

.btn--ghost {
  --_bg: transparent;
  --_fg: var(--fg-1);
  --_border: var(--border-strong);
}
.btn--ghost:hover { background: var(--bg-3); }

.btn--dark {
  --_bg: var(--ovdje-ink);
  --_fg: var(--fg-on-dark);
}
.btn--dark:hover { background: #1A2832; }

.btn--sm { padding: 10px 16px; font-size: var(--text-sm); }
.btn--lg { padding: 18px 32px; font-size: var(--text-md); }

/* =============================================================
   UTILITIES
   ============================================================= */

.container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-5); }
.surface-orange { background: var(--bg-accent); color: var(--fg-on-orange); }
.surface-dark   { background: var(--bg-dark);   color: var(--fg-on-dark); }
.surface-cream  { background: var(--bg-2);      color: var(--fg-1); }
.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}