/* ============================================================
   YKA Teknoloji — Design Tokens (variables.css)
   ============================================================
   Central source of truth for every design token used across
   the entire design system. Changing a value here propagates
   automatically wherever var(--token) is referenced.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     COLOR PALETTE
     ---------------------------------------------------------- */

  /* Primary — deep navy family */
  --color-primary:       #0F2B52;
  --color-primary-dark:  #080E1A;
  --color-primary-light: #1B4F8C;

  /* Accent — gold family */
  --color-accent:        #C4891A;
  --color-accent-light:  #D4951A;
  --color-accent-glow:   #F0B54A;

  /* Surfaces */
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F5F5F7;

  /* Dark tech band surfaces */
  --color-ink:         #0A0E16;
  --color-ink-deep:    #070B12;
  --color-ink-card:    rgba(255,255,255,0.04);
  --color-ink-border:  rgba(255,255,255,0.09);
  --color-ink-text:    #E8EDF5;
  --color-ink-muted:   #8a99ad;

  /* Text hierarchy */
  --color-text:          #111827;
  --color-text-muted:    #6B7280;
  --color-text-light:    #9CA3AF;

  /* Borders */
  --color-border:        #E5E7EB;

  /* Semantic */
  --color-success:       #22C55E;
  --color-danger:        #EF4444;

  /* Brand — WhatsApp */
  --color-whatsapp:      #25D366;

  /* ----------------------------------------------------------
     SPACING SCALE
     4-point grid: xs → 4xl
     ---------------------------------------------------------- */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  80px;

  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     BOX SHADOWS
     ---------------------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.07),
                 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:   0 10px 25px -3px rgba(0, 0, 0, 0.1),
                 0 4px 10px -4px rgba(0, 0, 0, 0.06);
  --shadow-xl:   0 20px 50px -12px rgba(0, 0, 0, 0.18);
  --shadow-glow: 0 0 24px rgba(196, 137, 26, 0.18);

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */

  /* Font families */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Fluid type scale using clamp() for smooth responsiveness.
     Min size → preferred vw → max size                       */
  --text-xs:   clamp(0.625rem,  0.6rem  + 0.1vw,  0.75rem);   /* ~10–12px */
  --text-sm:   clamp(0.75rem,   0.72rem + 0.15vw, 0.875rem);   /* ~12–14px */
  --text-base: clamp(0.875rem,  0.84rem + 0.18vw, 1rem);       /* ~14–16px */
  --text-lg:   clamp(1rem,      0.95rem + 0.25vw, 1.125rem);   /* ~16–18px */
  --text-xl:   clamp(1.125rem,  1rem    + 0.4vw,  1.25rem);    /* ~18–20px */
  --text-2xl:  clamp(1.25rem,   1.1rem  + 0.6vw,  1.5rem);     /* ~20–24px */
  --text-3xl:  clamp(1.5rem,    1.3rem  + 0.9vw,  1.875rem);   /* ~24–30px */
  --text-4xl:  clamp(1.875rem,  1.5rem  + 1.5vw,  2.5rem);     /* ~30–40px */
  --text-5xl:  clamp(2.25rem,   1.8rem  + 2vw,    3rem);       /* ~36–48px */
  --text-6xl:  clamp(2.75rem,   2rem    + 3vw,    3.75rem);    /* ~44–60px */

  /* ----------------------------------------------------------
     Z-INDEX SCALE
     Deliberate layers prevent z-index wars.
     ---------------------------------------------------------- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-modal:    400;

  /* ----------------------------------------------------------
     TRANSITION DURATIONS
     ---------------------------------------------------------- */
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* ----------------------------------------------------------
     EASING CURVES
     ---------------------------------------------------------- */
  --ease-out:     cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ----------------------------------------------------------
     GLOW EFFECTS
     ---------------------------------------------------------- */
  --glow-gold: 0 0 20px rgba(196,137,26,0.4), 0 0 60px rgba(196,137,26,0.15);
  --glow-blue: 0 0 20px rgba(27,79,140,0.5), 0 0 60px rgba(27,79,140,0.2);
  --glow-cyan: 0 0 20px rgba(56,189,248,0.4), 0 0 60px rgba(56,189,248,0.1);

  /* ----------------------------------------------------------
     GRADIENT BORDERS
     ---------------------------------------------------------- */
  --gradient-border-gold: linear-gradient(135deg, #C4891A, #F0B54A, #C4891A);
  --gradient-border-blue: linear-gradient(135deg, #0F2B52, #1B4F8C, #38BDF8);

  /* ----------------------------------------------------------
     GLASS EFFECTS
     ---------------------------------------------------------- */
  --glass-bg:       rgba(255,255,255,0.03);
  --glass-border:   rgba(255,255,255,0.08);
  --glass-bg-light: rgba(255,255,255,0.06);

  /* ----------------------------------------------------------
     TECH ACCENT — CYAN
     ---------------------------------------------------------- */
  --color-cyan:     #38BDF8;
  --color-cyan-dim: rgba(56,189,248,0.15);
}