/* =====================================================================
   tokens.css — the shared, READ-ONLY design contract for the whole fleet.
   UNALSOFT brand lock (clients/unalsoft/_config/brand-config.md §1–2).
   Every specialist references var(--*) — no file hardcodes a hex/px.
   ===================================================================== */

:root {
  /* ---- Palette (locked) ---- */
  --color-bg:        #05060b;
  --color-surface:   #0d0f18;
  --color-glass:     rgba(13, 15, 26, 0.62);
  --color-glass-brt: rgba(20, 23, 38, 0.72);
  --color-ink:       #f4f6fb;
  --color-muted:     #b7becc;
  --color-faint:     #8e97a8;  /* WCAG AA: lightened (same hue) so faint text clears 4.5:1 */
  --color-line:      rgba(183, 190, 204, 0.14);
  --color-violet:    #6c3cf0;  /* brand core */
  --color-blue:      #386af6;  /* gradient mid */
  --color-cyan:      #00d4ff;  /* vurgu — scoped */
  --color-live:      #3dff8c;  /* ONLY the single CH5 "launch/live" payoff beat */
  --color-action:            var(--color-violet);
  --color-action-contrast:   #ffffff;
  --gradient-brand:  linear-gradient(90deg, var(--color-violet) 0%, var(--color-blue) 55%, var(--color-cyan) 100%);
  --gradient-border: linear-gradient(135deg, rgba(108,60,240,.55), rgba(0,212,255,.35));

  /* ---- Type: one display + one workhorse (locked) ---- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "DM Sans", system-ui, sans-serif;

  /* ---- Modular scale (ratio 1.25) ---- */
  --fs-xs:   0.8rem;
  --fs-sm:   0.9rem;
  --fs-base: 1rem;
  --fs-lead: 1.25rem;
  --fs-h3:   1.563rem;
  --fs-h2:   clamp(1.953rem, 1.2rem + 3vw, 3.05rem);
  --fs-h1:   clamp(2.6rem, 1.4rem + 6.2vw, 6.1rem);
  --fs-menu: clamp(2rem, 1rem + 5vw, 4.4rem);
  --leading-tight: 1.06;
  --leading-body:  1.6;
  --track-chip: 0.18em;

  /* ---- Spacing rhythm ---- */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --section-y: clamp(4rem, 10vw, 9rem);
  --container:  72rem;
  --container-narrow: 30rem;

  --radius: 14px;
  --radius-lg: 22px;

  /* ---- Motion vocabulary ---- */
  --dur-fast: 200ms;
  --dur:      380ms;
  --dur-slow: 640ms;
  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Elevated dark zone (zentry STRUCTURE only — colors are UNALSOFT's own;
         user directive 2026-07-10: no zentry colors). Same var names, dark values. ---- */
  --color-paper:         #10131f;   /* elevated dark block over the void */
  --color-paper-soft:    #0d0f18;
  --color-ink-on-paper:  #f4f6fb;
  --color-line-on-paper: rgba(183, 190, 204, 0.14);
  --radius-zone: 40px;
  --fs-mega: clamp(3.2rem, 10.5vw, 9rem);

  /* ---- Z-index scale ---- */
  --z-canvas: 0;
  --z-poster: 0;
  --z-scrim:  1;
  --z-content: 2;
  --z-rail:   90;
  --z-header: 100;
  --z-menu:   150;
  --z-modal:  180;
  --z-loader: 200;
  --z-cursor: 300;
}

/* ---- Layout utilities (rhythm without seeing siblings) ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-lg); }
.section   { padding-block: var(--section-y); }
.stack > * + * { margin-top: var(--space-md); }

/* MDS-HR4: images use aspect-ratio, never fixed-height crops. */
.media { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.media--square { aspect-ratio: 1 / 1; }
.media--wide   { aspect-ratio: 16 / 9; }

/* Chip / eyebrow — NO text-transform: chip strings are WRITTEN uppercase in
   copy.json (dotted-İ guard: CSS uppercase would turn "Windows" → "WİNDOWS"
   under lang="tr"). */
.chip {
  display: inline-block; font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-xs); letter-spacing: var(--track-chip);
  color: var(--color-cyan);
}

/* Glass card over the living canvas */
.glass {
  position: relative;
  background: var(--color-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}

/* Brand-gradient text (display moments only) */
.grad-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}