/* ============================================================
   MR.Cutter — arculati tokenek
   Egyetlen igazsagforras a szinekre, tipografiara, terekre.
   ============================================================ */

/* ---------- Tipografia ---------- */
:root {
  --font-display: 'Clash Display', 'Satoshi', system-ui, sans-serif;
  --font-body: 'Satoshi', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Menlo', monospace;

  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);

  --tracking-tight: -0.02em;
  --tracking-label: 0.14em;
}

/* ---------- Terek (4px alap) ---------- */
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Szinek: vilagos (Nappali vagoszoba) ---------- */
:root,
[data-theme='light'] {
  color-scheme: light;

  --bg: oklch(0.976 0.008 80);
  --surface-1: oklch(0.945 0.011 80);
  --surface-2: oklch(0.905 0.014 78);
  --surface-3: oklch(0.865 0.016 78);
  --line: oklch(0.855 0.014 78);
  --line-strong: oklch(0.75 0.018 76);

  --text: oklch(0.215 0.014 62);
  --text-dim: oklch(0.475 0.014 66);
  --text-faint: oklch(0.63 0.012 70);

  --accent: oklch(0.655 0.155 58);
  --accent-hover: oklch(0.595 0.155 56);
  --accent-soft: oklch(0.93 0.045 78);
  --on-accent: oklch(0.99 0.004 80);

  --ok: oklch(0.53 0.115 148);
  --warn: oklch(0.62 0.145 60);
  --bad: oklch(0.545 0.175 27);

  --shadow-1: 0 1px 2px oklch(0.3 0.02 60 / 0.06), 0 2px 8px oklch(0.3 0.02 60 / 0.05);
  --shadow-2: 0 2px 6px oklch(0.3 0.02 60 / 0.08), 0 12px 32px oklch(0.3 0.02 60 / 0.09);
  --film: oklch(0.215 0.014 62);
}

/* ---------- Szinek: sotet (Golden hour) — ez az alaphangulat ---------- */
[data-theme='dark'] {
  color-scheme: dark;

  --bg: oklch(0.155 0.011 62);
  --surface-1: oklch(0.196 0.013 62);
  --surface-2: oklch(0.245 0.015 62);
  --surface-3: oklch(0.295 0.016 62);
  --line: oklch(0.315 0.015 62);
  --line-strong: oklch(0.42 0.018 64);

  --text: oklch(0.955 0.008 78);
  --text-dim: oklch(0.715 0.012 72);
  --text-faint: oklch(0.575 0.013 68);

  --accent: oklch(0.795 0.145 70);
  --accent-hover: oklch(0.855 0.135 74);
  --accent-soft: oklch(0.295 0.055 66);
  --on-accent: oklch(0.175 0.028 60);

  --ok: oklch(0.775 0.135 150);
  --warn: oklch(0.815 0.14 72);
  --bad: oklch(0.68 0.165 28);

  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.4), 0 2px 8px oklch(0 0 0 / 0.3);
  --shadow-2: 0 2px 6px oklch(0 0 0 / 0.45), 0 16px 40px oklch(0 0 0 / 0.4);
  --film: oklch(0.955 0.008 78);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: oklch(0.155 0.011 62);
    --surface-1: oklch(0.196 0.013 62);
    --surface-2: oklch(0.245 0.015 62);
    --surface-3: oklch(0.295 0.016 62);
    --line: oklch(0.315 0.015 62);
    --line-strong: oklch(0.42 0.018 64);
    --text: oklch(0.955 0.008 78);
    --text-dim: oklch(0.715 0.012 72);
    --text-faint: oklch(0.575 0.013 68);
    --accent: oklch(0.795 0.145 70);
    --accent-hover: oklch(0.855 0.135 74);
    --accent-soft: oklch(0.295 0.055 66);
    --on-accent: oklch(0.175 0.028 60);
    --ok: oklch(0.775 0.135 150);
    --warn: oklch(0.815 0.14 72);
    --bad: oklch(0.68 0.165 28);
    --shadow-1: 0 1px 2px oklch(0 0 0 / 0.4), 0 2px 8px oklch(0 0 0 / 0.3);
    --shadow-2: 0 2px 6px oklch(0 0 0 / 0.45), 0 16px 40px oklch(0 0 0 / 0.4);
    --film: oklch(0.955 0.008 78);
  }
}

/* ---------- Alap ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
}

h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.25;
}

h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-base);
  line-height: 1.3;
}

p {
  margin: 0;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

.num {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}