/* ============================================
   DESIGN TOKENS – Mehmet Kozan İnşaat
   ============================================ */

/* ── Geist Font Face Declarations ── */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Color Palette ── */

  /* Primary – Lacivert tonları */
  --color-primary-900: #060E1A;
  --color-primary-800: #0A1628;
  --color-primary-700: #0F1F38;
  --color-primary-600: #1B2A4A;
  --color-primary-500: #253A5E;
  --color-primary-400: #3A5280;
  --color-primary-300: #5A7AAF;
  --color-primary-200: #8AACD6;
  --color-primary-100: #C5D9EF;

  /* Accent – Altın/Amber tonları */
  --color-accent-900: #6B4F1A;
  --color-accent-800: #8B6820;
  --color-accent-700: #B08428;
  --color-accent-600: #C99A35;
  --color-accent-500: #D4A853;
  --color-accent-400: #E0BC6E;
  --color-accent-300: #F0C875;
  --color-accent-200: #F5D998;
  --color-accent-100: #FBE9C0;

  /* Neutral */
  --color-neutral-950: #0D0D0D;
  --color-neutral-900: #1A1A1A;
  --color-neutral-800: #2E2E2E;
  --color-neutral-700: #444444;
  --color-neutral-600: #5E5E5E;
  --color-neutral-500: #787878;
  --color-neutral-400: #9E9E9E;
  --color-neutral-300: #C4C4C4;
  --color-neutral-200: #E0E0E0;
  --color-neutral-100: #F0F0F0;
  --color-neutral-50:  #F8F8F8;
  --color-white:       #FFFFFF;

  /* Semantic Colors */
  --color-bg-primary:    var(--color-primary-800);
  --color-bg-dark:       var(--color-primary-900);
  --color-text-primary:  var(--color-white);
  --color-text-secondary: var(--color-neutral-300);
  --color-text-accent:   var(--color-accent-400);

  /* Gradients */
  --gradient-hero: linear-gradient(
    160deg,
    rgba(10, 22, 40, 0.92) 0%,
    rgba(27, 42, 74, 0.85) 40%,
    rgba(15, 31, 56, 0.80) 100%
  );
  --gradient-accent: linear-gradient(135deg, var(--color-accent-500), var(--color-accent-300));
  --gradient-dark: linear-gradient(180deg, var(--color-primary-900), var(--color-primary-800));

  /* ── Typography ── */
  --font-heading: 'Geist', system-ui, sans-serif;
  --font-body:    'Geist', system-ui, sans-serif;

  /* Font Sizes – Modular scale (1.25 ratio) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px */
  --text-6xl:  4.5rem;     /* 72px */

  /* Font Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line Heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Letter Spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.2em;

  /* ── Spacing ── */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ── Layout ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1400px;

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg:  0 8px 30px rgba(0, 0, 0, 0.2);
  --shadow-xl:  0 16px 50px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 30px rgba(212, 168, 83, 0.3);

  /* ── Transitions ── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-slower:  800ms;

  /* ── Z-Index Scale ── */
  --z-behind:  -1;
  --z-base:     0;
  --z-above:    10;
  --z-overlay:  100;
  --z-modal:    1000;
  --z-toast:    2000;
}