/* ============================================================
   DESIGN TOKENS - Harmancı Kuyumculuk
   Dark luxury + single gold accent. One theme (dark-locked).
   ============================================================ */

:root {
  /* ---- Surfaces (off-black, never pure #000) ---- */
  --bg: #0B0B0D;
  --bg-2: #101014;
  --surface: #16161B;
  --surface-2: #1C1C22;
  --surface-3: #232329;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);

  /* ---- Gold accent (single accent, locked) ---- */
  --gold-100: #F6E6BE;
  --gold-200: #F1DCA0;
  --gold-300: #E8C77A;   /* primary gold */
  --gold-400: #D9AE52;
  --gold-500: #C8962F;   /* deep gold */
  --gold-600: #A6781F;
  --gold-grad: linear-gradient(135deg, #F6E6BE 0%, #E8C77A 42%, #C8962F 100%);
  --gold-grad-soft: linear-gradient(135deg, rgba(241,220,160,0.18), rgba(200,150,47,0.06));
  --gold-glow: rgba(232, 199, 122, 0.22);

  /* ---- Text ---- */
  --text: #F4F1EA;
  --text-2: #B7B7BF;
  --text-3: #80808A;
  --on-gold: #1A1408;     /* dark text on gold fills (AA on gold) */

  /* ---- Semantic (price direction only) ---- */
  --up: #3FCF8E;
  --up-bg: rgba(63, 207, 142, 0.12);
  --down: #FF6B6B;
  --down-bg: rgba(255, 107, 107, 0.12);

  /* ---- Typography ---- */
  --font-display: "Clash Display", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid type scale (clamp: min, fluid, max) */
  --fs-eyebrow: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: clamp(1.0625rem, 0.5vw + 0.95rem, 1.1875rem);
  --fs-h3: clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --fs-h2: clamp(2rem, 3.2vw + 1rem, 3.25rem);
  --fs-hero: clamp(2.75rem, 6.5vw + 0.5rem, 5.5rem);
  --fs-stat: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.6;
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.035em;
  --tracking-wide: 0.16em;

  /* ---- Spacing & layout ---- */
  --container: 1240px;
  --container-pad: clamp(1.1rem, 4vw, 2.5rem);
  --section-y: clamp(5rem, 9vw, 9rem);
  --gap: clamp(1rem, 2vw, 1.75rem);

  /* ---- Radii (one scale: cards 18, controls pill, inputs 12) ---- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ---- Shadows (tinted to background, never pure black) ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 40px 90px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 20px 60px rgba(200, 150, 47, 0.18);
  --ring-gold: 0 0 0 1px rgba(232, 199, 122, 0.35);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 0.16s;
  --dur: 0.24s;
  --dur-slow: 0.6s;

  /* ---- Z-index scale (documented, no arbitrary spam) ---- */
  --z-base: 1;
  --z-sticky: 50;
  --z-nav: 100;
  --z-overlay: 200;
  --z-grain: 300;
}