/*
 * İLKE FREIGHT — Design System Tokens
 * Editorial Luxury Logistics direction
 * Cormorant Garamond (display) + DM Sans (body)
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300;1,9..40,400&display=swap');

/* ─────────────────────────────────────────
   BASE COLOR PALETTE
   ───────────────────────────────────────── */
:root {
  /* Core brand palette */
  --navy-900: oklch(14% 0.045 258);   /* deepest navy */
  --navy-800: oklch(18% 0.052 258);   /* near-black navy */
  --navy-700: oklch(22% 0.055 258);   /* primary navy — logo base */
  --navy-600: oklch(28% 0.060 258);
  --navy-500: oklch(36% 0.065 258);
  --navy-400: oklch(48% 0.060 258);
  --navy-300: oklch(62% 0.045 258);
  --navy-200: oklch(78% 0.028 258);
  --navy-100: oklch(90% 0.014 258);
  --navy-50:  oklch(95% 0.008 258);

  /* Gold — editorial accent */
  --gold-700: oklch(58% 0.11 78);
  --gold-600: oklch(65% 0.115 78);
  --gold-500: oklch(72% 0.11 78);    /* primary gold */
  --gold-400: oklch(80% 0.09 78);
  --gold-300: oklch(87% 0.07 78);
  --gold-200: oklch(92% 0.05 78);

  /* Crimson / Pink — logo mark color, exact brand energy (#de1f5a) */
  --crimson-950: oklch(28% 0.20 5);
  --crimson-800: oklch(35% 0.23 5);
  --crimson-700: oklch(38% 0.25 5);
  --crimson-600: oklch(44% 0.26 5);
  --crimson-500: oklch(49% 0.25 5);  /* primary — exact #de1f5a logo mark */
  --crimson-400: oklch(58% 0.23 5);
  --crimson-300: oklch(68% 0.20 5);  /* mid pink */
  --crimson-200: oklch(79% 0.15 5);  /* soft pink */
  --crimson-100: oklch(91% 0.08 5);  /* blush */

  /* Off-white / paper */
  --white:      oklch(100% 0 0);
  --offwhite:   oklch(97% 0.006 258);  /* primary off-white */
  --paper:      oklch(94% 0.008 258);
  --mist:       oklch(88% 0.010 258);

  /* ─────────────────────────────────────────
     SEMANTIC COLOR TOKENS
     ───────────────────────────────────────── */

  /* Backgrounds */
  --bg-primary:    var(--navy-700);
  --bg-deep:       var(--navy-900);
  --bg-surface:    var(--navy-600);
  --bg-light:      var(--offwhite);
  --bg-paper:      var(--paper);

  /* Foregrounds */
  --fg-primary:    var(--offwhite);
  --fg-secondary:  var(--navy-200);
  --fg-muted:      var(--navy-300);
  --fg-inverse:    var(--navy-700);
  --fg-on-light:   var(--navy-700);

  /* Accent */
  --accent-gold:    var(--gold-500);
  --accent-gold-dk: var(--gold-700);
  --accent-crimson: var(--crimson-500);

  /* Borders / hairlines */
  --hairline:        oklch(72% 0.11 78 / 0.35);  /* gold hairline, subtle */
  --hairline-strong: oklch(72% 0.11 78 / 0.65);
  --border-light:    oklch(97% 0.006 258 / 0.12);
  --border-mid:      oklch(97% 0.006 258 / 0.22);

  /* ─────────────────────────────────────────
     TYPOGRAPHY TOKENS
     ───────────────────────────────────────── */

  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono:    'Courier New', monospace;

  /* Type scale */
  --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:  2rem;       /* 32px */
  --text-3xl:  2.5rem;     /* 40px */
  --text-4xl:  3.5rem;     /* 56px */
  --text-5xl:  5rem;       /* 80px */
  --text-6xl:  7rem;       /* 112px */

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-widest:  0.16em;

  /* ─────────────────────────────────────────
     SEMANTIC TYPE ROLES
     ───────────────────────────────────────── */

  /* Display / Hero */
  --type-hero-size:    var(--text-6xl);
  --type-hero-font:    var(--font-display);
  --type-hero-weight:  300;
  --type-hero-leading: var(--leading-tight);
  --type-hero-tracking: var(--tracking-tight);
  --type-hero-style:   italic;

  /* H1 */
  --type-h1-size:    var(--text-5xl);
  --type-h1-font:    var(--font-display);
  --type-h1-weight:  400;
  --type-h1-leading: var(--leading-tight);
  --type-h1-tracking: var(--tracking-tight);

  /* H2 */
  --type-h2-size:    var(--text-4xl);
  --type-h2-font:    var(--font-display);
  --type-h2-weight:  400;
  --type-h2-leading: var(--leading-snug);

  /* H3 */
  --type-h3-size:    var(--text-2xl);
  --type-h3-font:    var(--font-display);
  --type-h3-weight:  500;
  --type-h3-leading: var(--leading-snug);

  /* Eyebrow / label */
  --type-eyebrow-size:     var(--text-xs);
  --type-eyebrow-font:     var(--font-body);
  --type-eyebrow-weight:   600;
  --type-eyebrow-tracking: var(--tracking-widest);
  --type-eyebrow-transform: uppercase;

  /* Body */
  --type-body-size:    var(--text-base);
  --type-body-font:    var(--font-body);
  --type-body-weight:  400;
  --type-body-leading: var(--leading-relaxed);

  /* Body small */
  --type-body-sm-size:   var(--text-sm);
  --type-body-sm-weight: 400;
  --type-body-sm-leading: var(--leading-normal);

  /* Caption */
  --type-caption-size:    var(--text-xs);
  --type-caption-font:    var(--font-body);
  --type-caption-weight:  400;
  --type-caption-tracking: var(--tracking-wide);

  /* ─────────────────────────────────────────
     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 */
  --space-32: 8rem;      /* 128px */

  /* ─────────────────────────────────────────
     BORDER RADIUS
     ───────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 9999px;

  /* ─────────────────────────────────────────
     SHADOWS / ELEVATION
     ───────────────────────────────────────── */
  --shadow-sm:  0 1px 3px oklch(0% 0 0 / 0.25);
  --shadow-md:  0 4px 16px oklch(0% 0 0 / 0.35);
  --shadow-lg:  0 12px 40px oklch(0% 0 0 / 0.45);
  --shadow-xl:  0 24px 64px oklch(0% 0 0 / 0.55);
  --glow-gold:  0 0 24px oklch(72% 0.11 78 / 0.20);

  /* ─────────────────────────────────────────
     TRANSITIONS
     ───────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1); /* @kind other */
  --duration-fast:   150ms; /* @kind other */
  --duration-normal: 280ms; /* @kind other */
  --duration-slow:   480ms; /* @kind other */
}

/* ─────────────────────────────────────────
   GLOBAL BASE STYLES
   ───────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* ─────────────────────────────────────────
   SEMANTIC ELEMENT STYLES
   ───────────────────────────────────────── */

.display, .hero-type {
  font-family: var(--font-display);
  font-size: var(--type-hero-size);
  font-weight: var(--type-hero-weight);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-style: italic;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--type-h1-size);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  font-weight: 400;
  line-height: var(--leading-snug);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--type-h3-size);
  font-weight: 500;
  line-height: var(--leading-snug);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent-gold);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: 400;
  line-height: var(--leading-relaxed);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  line-height: var(--leading-normal);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--type-caption-size);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-secondary);
}

/* Hairline utility */
.hairline {
  border: none;
  border-top: 1px solid var(--hairline);
}

/* Gold accent text */
.text-gold    { color: var(--accent-gold); }
.text-crimson { color: var(--accent-crimson); }
.text-muted   { color: var(--fg-secondary); }