/* ===========================================================================
   YEDİPERA — Design tokens
   Deep ink navy + cool paper + restrained champagne accent.
   =========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------- */
  --navy: #0b1c33;
  --navy-deep: #071423;
  --navy-ink: #040d18;
  --navy-raised: #122947;
  --white: #ffffff;
  --accent: #c4a777;
  --accent-soft: rgba(196, 167, 119, 0.22);

  /* --- Neutrals ---------------------------------------------------------- */
  --off-white: #f2f4f7;
  --paper: #f7f8fa;
  --stone-100: #e4e8ee;
  --stone-200: #cfd5de;
  --stone-400: #9aa3b0;
  --stone-500: #7d8694;
  --stone-600: #5f6876;
  --cool-600: #576274;
  --cool-700: #3d4a5f;

  /* --- Semantic text ---------------------------------------------------- */
  --text-strong: var(--navy);
  --text-body: var(--cool-700);
  --text-muted: var(--cool-600);
  --text-quiet: var(--stone-600);
  --text-on-dark: rgba(255, 255, 255, 0.92);
  --text-on-dark-muted: rgba(255, 255, 255, 0.68);
  --text-on-dark-faint: rgba(255, 255, 255, 0.52);

  /* --- Hairlines --------------------------------------------------------- */
  --rule: rgba(11, 28, 51, 0.12);
  --rule-soft: rgba(11, 28, 51, 0.07);
  --rule-strong: rgba(11, 28, 51, 0.26);
  --rule-light: rgba(255, 255, 255, 0.18);
  --rule-light-soft: rgba(255, 255, 255, 0.1);
  --rule-light-strong: rgba(255, 255, 255, 0.38);

  /* --- Type families ---------------------------------------------------- */
  --font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* --- Type scale ------------------------------------------------------- */
  --fs-display-1: clamp(2.5rem, 6.1vw, 6rem);
  --fs-display-2: clamp(2.125rem, 4.6vw, 4.5rem);
  --fs-display-3: clamp(1.75rem, 3vw, 2.75rem);
  --fs-title: clamp(1.375rem, 2vw, 1.875rem);
  --fs-subtitle: clamp(1.125rem, 1.35vw, 1.3125rem);
  --fs-lede: clamp(1.125rem, 1.5vw, 1.5rem);
  --fs-body: clamp(0.9688rem, 0.92vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-label: 0.6875rem;

  --lh-display: 1.04;
  --lh-title: 1.18;
  --lh-body: 1.72;

  --ls-display: -0.028em;
  --ls-title: -0.014em;
  --ls-label: 0.2em;
  --ls-nav: 0.06em;

  /* --- Space / rhythm --------------------------------------------------- */
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --shell-max: 1560px;
  --measure: 34rem;

  --section-y: clamp(5rem, 10.5vw, 11.5rem);
  --section-y-tight: clamp(4rem, 7vw, 7.5rem);
  --stack-1: 0.5rem;
  --stack-2: 1rem;
  --stack-3: 1.5rem;
  --stack-4: 2.5rem;
  --stack-5: clamp(2.5rem, 4.5vw, 4.5rem);
  --stack-6: clamp(3.5rem, 7vw, 7rem);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.66, 0, 0.34, 1);
  --dur-fast: 240ms;
  --dur-mid: 480ms;
  --dur-slow: 760ms;
  --dur-reveal: 900ms;

  /* --- Chrome ----------------------------------------------------------- */
  --masthead-h: 98px;
  --z-drawer: 80;
  --z-masthead: 90;
  --z-skip: 100;

  /* --- Glassmorphism ---------------------------------------------------- */
  --glass-light-bg: rgba(255, 255, 255, 0.62);
  --glass-light-border: rgba(255, 255, 255, 0.72);
  --glass-light-shadow: 0 18px 40px rgba(11, 28, 51, 0.08);
  --glass-dark-bg: rgba(10, 32, 58, 0.55);
  --glass-dark-border: rgba(190, 214, 240, 0.22);
  --glass-dark-shadow: 0 18px 44px rgba(4, 13, 24, 0.38);
  --glass-blur: blur(18px) saturate(145%);
  --glass-blur-strong: blur(28px) saturate(160%);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --glass-radius: 4px;
  --glass-radius-lg: 8px;
  --z-toast: 95;
  --z-modal: 96;
}

@media (max-width: 900px) {
  :root {
    --masthead-h: 76px;
  }
}