/* dropmind design system tokenek — a claude.ai/design projektből 1:1 átvéve
   (tokens/colors.css + typography.css + spacing.css + base.css egyben) */

:root {
  /* ---- Core brand palette ---- */
  --dm-luxury-black: #020A0C;
  --dm-tiber:        #04313D;
  --dm-cyan:         #3BFFF7;
  --dm-mint:         #DAFED8;
  --dm-blue:         #2F89AB;
  --dm-paper:        #EFEFEF;
  --dm-white:        #FFFFFF;

  /* ---- Extended teal ramp ---- */
  --dm-teal-950: #020A0C;
  --dm-teal-900: #04181E;
  --dm-teal-800: #04313D;
  --dm-teal-700: #074654;
  --dm-teal-600: #0a5e70;
  --dm-teal-500: #11808f;
  --dm-teal-400: #2f89ab;
  --dm-teal-300: #37cdd5;
  --dm-teal-200: #3bfff7;
  --dm-teal-100: #8efee6;
  --dm-teal-50:  #c1ffdf;

  /* ---- Neutral ramp ---- */
  --dm-neutral-950: #050b0d;
  --dm-neutral-900: #0a1417;
  --dm-neutral-800: #122025;
  --dm-neutral-700: #1e3036;
  --dm-neutral-600: #33484f;
  --dm-neutral-500: #5a6e74;
  --dm-neutral-400: #8a9a9f;
  --dm-neutral-300: #b4c0c3;
  --dm-neutral-200: #d6dddf;
  --dm-neutral-100: #eef1f1;
  --dm-neutral-50:  #f7f9f9;

  /* ---- Signature gradients ---- */
  --dm-grad-logo: linear-gradient(105deg, #339fb8 0%, #3dfdf3 55%, #c1ffdf 100%);
  --dm-grad-logo-vertical: linear-gradient(0deg, #2f89ab 0%, #3dfdf3 55%, #c1ffdf 100%);
  --dm-grad-bg: linear-gradient(160deg, #020A0C 0%, #04313D 100%);
  --dm-grad-bg-vertical: linear-gradient(0deg, #04313D 0%, #021519 52%, #020A0C 100%);
  --dm-grad-glow: radial-gradient(60% 60% at 50% 60%, rgba(59,255,247,0.45) 0%, rgba(59,255,247,0) 70%);
  --dm-grad-glow-sweep: linear-gradient(152deg, #020A0C 0%, #04222a 26%, #0a6f76 58%, #2bbfc0 82%, #63dbe2 100%);
  --dm-grad-stage: radial-gradient(80% 55% at 50% 100%, #c1ffdf 0%, #3dfdf3 20%, #339fb8 42%, #04313D 68%, #020A0C 100%);

  /* ---- Semantic status ---- */
  --dm-success: #3dfdf3;
  --dm-warning: #f5c451;
  --dm-danger:  #ff6b6b;
  --dm-info:    #2f89ab;

  /* ============ Semantic aliases (dark — default) ============ */
  --bg-base:        var(--dm-luxury-black);
  --bg-elevated:    #081c22;
  --surface-card:   #0a2129;
  --surface-sunken: #03181d;
  --surface-inverse: var(--dm-paper);

  --border-subtle:  rgba(255,255,255,0.08);
  --border-default: rgba(255,255,255,0.14);
  --border-strong:  rgba(59,255,247,0.40);

  --text-strong:    #f4faf9;
  --text-body:      #c3d2d4;
  --text-muted:     #7e9398;
  --text-faint:     #4f656b;
  --text-inverse:   var(--dm-luxury-black);
  --text-accent:    var(--dm-cyan);

  --accent:         var(--dm-cyan);
  --accent-hover:   #6bfff9;
  --accent-press:   #1fe6dd;
  --accent-quiet:   rgba(59,255,247,0.12);
  --accent-contrast: var(--dm-luxury-black);

  --focus-ring:     rgba(59,255,247,0.55);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 1px rgba(59,255,247,0.25), 0 8px 40px rgba(59,255,247,0.18);

  /* ---- Typography ---- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-sans:    "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", "Space Grotesk", system-ui, sans-serif;
  --font-mono:    "Space Grotesk", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-md:  16px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 84px;
  --text-7xl: 112px;

  --leading-tight: 1.04;
  --leading-snug: 1.18;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;
  --tracking-widest: 0.22em;

  /* ---- Spacing (4px grid) ---- */
  --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;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radii ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-thick: 1.5px;

  /* ---- Containers ---- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;

  /* ---- Motion: nyugodt, precíz, bounce nélkül ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ============ Light theme scope ============ */
.dm-theme-light {
  --bg-base:        var(--dm-paper);
  --bg-elevated:    #ffffff;
  --surface-card:   #ffffff;
  --surface-sunken: #e7ebeb;
  --surface-inverse: var(--dm-luxury-black);

  --border-subtle:  rgba(2,10,12,0.07);
  --border-default: rgba(2,10,12,0.14);
  --border-strong:  rgba(4,49,61,0.45);

  --text-strong:    #041218;
  --text-body:      #1e3036;
  --text-muted:     #5a6e74;
  --text-faint:     #8a9a9f;
  --text-inverse:   var(--dm-paper);
  --text-accent:    #0a5e70;

  --accent:         #0a5e70;
  --accent-hover:   #11808f;
  --accent-press:   #074654;
  --accent-quiet:   rgba(10,94,112,0.10);
  --accent-contrast: #ffffff;

  --focus-ring:     rgba(10,94,112,0.45);

  --shadow-sm: 0 1px 2px rgba(4,24,30,0.08);
  --shadow-md: 0 6px 20px rgba(4,24,30,0.10);
  --shadow-lg: 0 24px 60px rgba(4,24,30,0.14);
  --shadow-glow: 0 0 0 1px rgba(10,94,112,0.20), 0 8px 30px rgba(10,94,112,0.12);
}

/* ============ Base ============ */
:root { color-scheme: dark; }

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

html { scroll-behavior: smooth; }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; margin: 0; }

a { color: inherit; text-decoration: none; }

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

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

::selection { background: var(--accent); color: var(--accent-contrast); }

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ---- Brand utilities ---- */
.dm-grad-text {
  background: var(--dm-grad-logo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* A data-words szó-spanek transform/filter-e megtöri a szülő background-clip: text-jét
   (Chromium) — ezért a gradiens a szavakon magukon is ott van. */
.dm-grad-text .w {
  background: var(--dm-grad-logo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dm-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* A scroll-reveal állapotokat az egyes oldalak saját CSS-e kezeli (.has-js scope alatt,
   GSAP-pal) — itt szándékosan nincs [data-reveal]/[data-words] rejtés, hogy a JS nélküli
   látogató is lásson minden tartalmat. */