/* ==========================================================================
   DESIGN TOKENS
   Renkler, tipografi, spacing, radius, shadow, motion, z-index
   ========================================================================== */

:root {
  /* Brand colors — logo türevli */
  --brand-primary: #0A7D8C;
  --brand-primary-dark: #075A66;
  --brand-primary-light: #1A9FB0;
  --brand-primary-50: #E6F4F6;
  --brand-primary-100: #C5E7EB;

  --brand-accent: #F4C430;
  --brand-accent-dark: #D4A91A;
  --brand-accent-light: #FAD968;

  /* Neutrals */
  --ink: #0F1B2D;
  --ink-soft: #3A4A5E;
  --muted: #6B7A8F;
  --muted-soft: #94A1B5;
  --surface: #FFFFFF;
  --surface-alt: #F5F8FA;
  --surface-deep: #EDF1F5;
  --border: #E2E8EC;
  --border-strong: #C8D2DC;

  /* Semantic */
  --success: #16A34A;
  --warning: #F59E0B;
  --danger: #DC2626;
  --info: #2563EB;

  /* Typography — font families */
  --font-heading: "Manrope", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    system-ui, sans-serif;

  /* Type scale — fluid via clamp() */
  --fs-xs: 0.75rem;        /* 12 */
  --fs-sm: 0.875rem;       /* 14 */
  --fs-base: 1rem;         /* 16 */
  --fs-md: 1.125rem;       /* 18 */
  --fs-lg: 1.25rem;        /* 20 */
  --fs-xl: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);   /* 22-26 */
  --fs-2xl: clamp(1.625rem, 1.3rem + 1.2vw, 2rem);       /* 26-32 */
  --fs-3xl: clamp(2rem, 1.5rem + 2vw, 2.75rem);          /* 32-44 */
  --fs-4xl: clamp(2.5rem, 1.8rem + 3vw, 3.75rem);        /* 40-60 */
  --fs-5xl: clamp(3rem, 2.2rem + 4vw, 4.5rem);           /* 48-72 */

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  /* Spacing scale (8px base) */
  --space-1: 0.25rem;      /* 4 */
  --space-2: 0.5rem;       /* 8 */
  --space-3: 0.75rem;      /* 12 */
  --space-4: 1rem;         /* 16 */
  --space-5: 1.5rem;       /* 24 */
  --space-6: 2rem;         /* 32 */
  --space-7: 3rem;         /* 48 */
  --space-8: 4rem;         /* 64 */
  --space-9: 6rem;         /* 96 */
  --space-10: 8rem;        /* 128 */

  /* Section padding */
  --section-y: clamp(3rem, 2rem + 5vw, 6rem);
  --section-y-sm: clamp(2rem, 1.5rem + 2vw, 3.5rem);

  /* Container */
  --container-max: 1240px;
  --container-pad: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 27, 45, 0.08);
  --shadow-lg: 0 12px 28px rgba(15, 27, 45, 0.12);
  --shadow-xl: 0 24px 48px rgba(15, 27, 45, 0.16);
  --shadow-focus: 0 0 0 3px rgba(10, 125, 140, 0.25);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;

  /* Z-index */
  --z-base: 1;
  --z-header: 100;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* Layout */
  --header-h: 76px;
  --header-h-scroll: 64px;

  /* Image aspect ratios */
  --ratio-hero: 16 / 9;
  --ratio-card: 4 / 3;
  --ratio-wide: 21 / 9;
  --ratio-square: 1 / 1;
}

/* Optional dark-mode tokens — kept disabled by default but ready */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --ink: #F2F5F9;
    --ink-soft: #C2CDD9;
    --muted: #8A98AB;
    --surface: #0F1B2D;
    --surface-alt: #16243A;
    --surface-deep: #1D2E47;
    --border: #25364F;
    --border-strong: #34476A;
  }
}