/* =============================================================
   Tigra Informatika — Design Tokens
   Klasszikus prémium — sok fehér tér, finom arany akcentusok
   ============================================================= */

:root {
  /* — Brand palette — */
  --tigra-gold:        #AF9B68;
  --tigra-gold-soft:   #C7B587;
  --tigra-gold-deep:   #8E7C4F;
  --tigra-gold-tint:   #F5F0E4;

  --tigra-charcoal:    #414141;
  --tigra-ink:         #1A1A1A;
  --tigra-mid:         #999898;
  --tigra-line:        #E7E7E8;
  --tigra-paper:       #FAFAF8;
  --tigra-white:       #FFFFFF;

  /* — Secondary palette (10) — kategóriák, charts, dekoratív akcent — */
  --sec-olive:    #A0AF68;
  --sec-blue:     #687CAF;
  --sec-leaf:     #7CAF68;
  --sec-teal:     #68A0AF;
  --sec-mint:     #68AF77;
  --sec-violet:   #7768AF;
  --sec-rose:     #AF68A0;
  --sec-aqua:     #68AF9B;
  --sec-purple:   #9B68AF;
  --sec-clay:     #AF7768;

  /* — Functional — */
  --ok:    #4F8F5A;
  --warn:  #B8862E;
  --err:   #B0473A;
  --info:  #466B9B;

  /* — Surfaces & text (light) — */
  --bg:           var(--tigra-paper);
  --bg-elev:      var(--tigra-white);
  --bg-mute:      #F2F1ED;
  --text:         var(--tigra-charcoal);
  --text-mute:    #5A5A5A;
  --text-soft:    var(--tigra-mid);
  --border:       var(--tigra-line);
  --border-strong:#D4D3CE;
  --accent:       var(--tigra-gold);
  --accent-ink:   var(--tigra-charcoal);

  /* — Typography — */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;

  --fs-12: 12px;  --lh-12: 16px;
  --fs-14: 14px;  --lh-14: 20px;
  --fs-16: 16px;  --lh-16: 24px;
  --fs-18: 18px;  --lh-18: 28px;
  --fs-20: 20px;  --lh-20: 28px;
  --fs-24: 24px;  --lh-24: 32px;
  --fs-32: 32px;  --lh-32: 40px;
  --fs-44: 44px;  --lh-44: 52px;
  --fs-60: 60px;  --lh-60: 64px;
  --fs-80: 80px;  --lh-80: 84px;

  /* — Spacing scale (4-based) — */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;
  --sp-4: 16px;  --sp-5: 20px;  --sp-6: 24px;
  --sp-8: 32px;  --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* — Radii (a figma 30/32 alapján) — */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 30px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* — Shadows — diszkrét, prémium — */
  --shadow-1: 0 1px 2px rgba(20, 20, 20, 0.04), 0 1px 1px rgba(20, 20, 20, 0.03);
  --shadow-2: 0 4px 12px rgba(20, 20, 20, 0.06), 0 2px 4px rgba(20, 20, 20, 0.04);
  --shadow-3: 0 12px 32px rgba(20, 20, 20, 0.08), 0 4px 8px rgba(20, 20, 20, 0.04);
  --shadow-gold: 0 6px 20px rgba(175, 155, 104, 0.25);

  /* — Motion — */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;

  --container: 1200px;
}

[data-theme="dark"] {
  --bg:           #0F0F10;
  --bg-elev:      #18181A;
  --bg-mute:      #222224;
  --text:         #F5F4F1;
  --text-mute:    #B8B6B0;
  --text-soft:    #8A8884;
  --border:       #2A2A2C;
  --border-strong:#3A3A3C;
  --accent:       var(--tigra-gold-soft);
  --accent-ink:   #F5F4F1;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.55);
}

/* — Resets — */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* — Type primitives — */
.t-display { font-size: clamp(48px, 6vw, var(--fs-80)); line-height: 1.02; font-weight: 700; letter-spacing: -0.02em; }
.t-h1 { font-size: var(--fs-60); line-height: var(--lh-60); font-weight: 700; letter-spacing: -0.015em; }
.t-h2 { font-size: var(--fs-44); line-height: var(--lh-44); font-weight: 700; letter-spacing: -0.01em; }
.t-h3 { font-size: var(--fs-32); line-height: var(--lh-32); font-weight: 600; letter-spacing: -0.005em; }
.t-h4 { font-size: var(--fs-24); line-height: var(--lh-24); font-weight: 600; }
.t-h5 { font-size: var(--fs-20); line-height: var(--lh-20); font-weight: 600; }
.t-body { font-size: var(--fs-16); line-height: var(--lh-16); }
.t-body-lg { font-size: var(--fs-18); line-height: var(--lh-18); }
.t-small { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--text-mute); }
.t-tag { font-size: var(--fs-12); line-height: var(--lh-12); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--accent); }
.t-mono { font-family: var(--font-mono); }
.t-pretty { text-wrap: pretty; }

/* — Utilities — */
.container { max-width: var(--container); margin: 0 auto; padding-left: var(--sp-6); padding-right: var(--sp-6); }
.stack > * + * { margin-top: var(--stack, var(--sp-4)); }
.row { display: flex; gap: var(--gap, var(--sp-4)); }
.row-wrap { display: flex; flex-wrap: wrap; gap: var(--gap, var(--sp-4)); }
.grid { display: grid; gap: var(--gap, var(--sp-6)); }
.divider { height: 1px; background: var(--border); border: 0; margin: 0; }
.gold-rule { height: 2px; width: 56px; background: var(--accent); border: 0; margin: 0 0 var(--sp-4); }

/* — Components: button — */
.btn {
  --btn-bg: var(--tigra-charcoal);
  --btn-fg: var(--tigra-white);
  --btn-bd: var(--tigra-charcoal);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 12px 22px;
  font: 500 var(--fs-14)/1 var(--font-sans);
  letter-spacing: 0.02em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn--primary { --btn-bg: var(--tigra-charcoal); --btn-fg: #fff; --btn-bd: var(--tigra-charcoal); }
.btn--gold { --btn-bg: var(--tigra-gold); --btn-fg: #fff; --btn-bd: var(--tigra-gold); }
.btn--gold:hover { box-shadow: var(--shadow-gold); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--border-strong); }
.btn--ghost:hover { --btn-bg: var(--bg-mute); }
.btn--link { --btn-bg: transparent; --btn-fg: var(--accent); --btn-bd: transparent; padding-left: 4px; padding-right: 4px; }
.btn--lg { padding: 16px 28px; font-size: var(--fs-16); }
.btn--sm { padding: 8px 14px; font-size: var(--fs-12); }

/* — Card — */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.card--hover:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--border-strong); }
.card--feature { border-radius: var(--r-2xl); padding: var(--sp-8); }
.card--gold { background: var(--tigra-gold-tint); border-color: transparent; }
.card--ink { background: var(--tigra-ink); color: #F5F4F1; border-color: transparent; }

/* — Form — */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-14); font-weight: 500; color: var(--text); }
.field .hint { font-size: var(--fs-12); color: var(--text-soft); }
.input, .select, .textarea {
  width: 100%;
  padding: 12px 14px;
  font: 400 var(--fs-14)/1.4 var(--font-sans);
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(175, 155, 104, 0.18); }
.textarea { min-height: 96px; resize: vertical; }

/* — Badge — */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font: 500 var(--fs-12)/1.2 var(--font-sans);
  letter-spacing: 0.04em;
  background: var(--bg-mute);
  color: var(--text);
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
}
.badge--gold { background: var(--tigra-gold-tint); color: var(--tigra-gold-deep); border-color: transparent; }
.badge--ink { background: var(--tigra-ink); color: #fff; border-color: transparent; }
.badge--ok { background: rgba(79,143,90,0.12); color: var(--ok); border-color: transparent; }
.badge--warn { background: rgba(184,134,46,0.12); color: var(--warn); border-color: transparent; }
.badge--err { background: rgba(176,71,58,0.12); color: var(--err); border-color: transparent; }

/* — Section header — */
.eyebrow {
  display: inline-block;
  font: 600 var(--fs-12)/1 var(--font-sans);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}

/* — Helpers — */
.muted { color: var(--text-mute); }
.soft { color: var(--text-soft); }
.gold { color: var(--accent); }
.center { text-align: center; }