/* ============================================================
   İYİP Creative — Design System
   Renk, Tipografi, Spacing, Elevation, Motion Tokens
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,700&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,400&family=Great+Vibes&display=swap');

/* ── CSS Custom Properties ── */
:root {

  /* Colors — Primary */
  --color-navy:        #0D2137;
  --color-navy-mid:    #1A3A52;
  --color-navy-light:  #244D6B;
  --color-navy-950:    #081525;

  /* Colors — Gold Accent */
  --color-gold:        #C8963E;
  --color-gold-light:  #DDB568;
  --color-gold-pale:   #F2E3C6;
  --color-gold-dark:   #A57830;

  /* Colors — Neutral */
  --color-cream:       #F5F3EE;
  --color-cream-dark:  #EAE7E0;
  --color-mint:        #E8F4F0;
  --color-mint-mid:    #C8E8DF;

  /* Colors — Text */
  --color-ink:         #1C1C1E;
  --color-ink-mid:     #3A3A3C;
  --color-ink-soft:    #636366;
  --color-ink-muted:   #8E8E93;

  /* Colors — Surface */
  --color-white:       #FFFFFF;
  --color-surface:     #F5F3EE;
  --color-surface-alt: #FFFFFF;

  /* Semantic */
  --color-bg:          var(--color-cream);
  --color-bg-dark:     var(--color-navy);
  --color-text:        var(--color-ink);
  --color-text-light:  rgba(255, 255, 255, 0.9);
  --color-accent:      var(--color-gold);
  --color-border:      rgba(13, 33, 55, 0.1);
  --color-border-dark: rgba(255, 255, 255, 0.12);

  /* Typography — Families */
  --font-display:  'Fraunces', Georgia, serif;
  --font-body:     'DM Sans', system-ui, -apple-system, sans-serif;
  --font-script:   'Great Vibes', cursive;

  /* Typography — Scale (fluid) */
  --text-xs:    clamp(0.75rem,   0.7rem + 0.2vw,   0.8125rem);
  --text-sm:    clamp(0.875rem,  0.82rem + 0.25vw,  0.9375rem);
  --text-base:  clamp(1rem,      0.95rem + 0.25vw,  1.0625rem);
  --text-md:    clamp(1.125rem,  1.05rem + 0.375vw, 1.25rem);
  --text-lg:    clamp(1.25rem,   1.1rem  + 0.75vw,  1.5rem);
  --text-xl:    clamp(1.5rem,    1.2rem  + 1.5vw,   2rem);
  --text-2xl:   clamp(1.875rem,  1.4rem  + 2.375vw, 2.75rem);
  --text-3xl:   clamp(2.25rem,   1.6rem  + 3.25vw,  3.5rem);
  --text-4xl:   clamp(2.75rem,   1.8rem  + 4.75vw,  5rem);
  --text-5xl:   clamp(3.5rem,    2rem    + 7.5vw,   7rem);

  /* Typography — Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Typography — Leading */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.75;

  /* Typography — Tracking */
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.15em;

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

  /* Section Spacing (fluid) */
  --section-sm:   clamp(3rem,  4vw, 5rem);
  --section-md:   clamp(4rem,  7vw, 8rem);
  --section-lg:   clamp(5rem, 10vw, 12rem);

  /* Layout */
  --container-max:   1280px;
  --container-wide:  1440px;
  --container-narrow: 768px;
  --gutter:      clamp(1rem, 4vw, 2rem);
  --col-gap:     clamp(1rem, 3vw, 2rem);

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

  /* Elevation */
  --shadow-xs:  0 1px 2px rgba(13, 33, 55, 0.06);
  --shadow-sm:  0 2px 8px rgba(13, 33, 55, 0.08), 0 1px 2px rgba(13, 33, 55, 0.04);
  --shadow-md:  0 4px 20px rgba(13, 33, 55, 0.10), 0 2px 6px rgba(13, 33, 55, 0.06);
  --shadow-lg:  0 8px 40px rgba(13, 33, 55, 0.12), 0 4px 12px rgba(13, 33, 55, 0.08);
  --shadow-xl:  0 20px 60px rgba(13, 33, 55, 0.16), 0 8px 24px rgba(13, 33, 55, 0.10);
  --shadow-gold: 0 8px 30px rgba(200, 150, 62, 0.25);

  /* Motion */
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;
  --duration-anim:   800ms;

  /* Z-index scale */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-nav:     300;
  --z-toast:   400;
}

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

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-cream);
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

ul, ol {
  list-style: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
}

/* ── Typography Utilities ── */
.font-display  { font-family: var(--font-display); }
.font-body     { font-family: var(--font-body); }
.font-script   { font-family: var(--font-script); }

.text-xs    { font-size: var(--text-xs); }
.text-sm    { font-size: var(--text-sm); }
.text-base  { font-size: var(--text-base); }
.text-md    { font-size: var(--text-md); }
.text-lg    { font-size: var(--text-lg); }
.text-xl    { font-size: var(--text-xl); }
.text-2xl   { font-size: var(--text-2xl); }
.text-3xl   { font-size: var(--text-3xl); }
.text-4xl   { font-size: var(--text-4xl); }
.text-5xl   { font-size: var(--text-5xl); }

.weight-light    { font-weight: var(--weight-light); }
.weight-regular  { font-weight: var(--weight-regular); }
.weight-medium   { font-weight: var(--weight-medium); }
.weight-semibold { font-weight: var(--weight-semibold); }
.weight-bold     { font-weight: var(--weight-bold); }
.weight-black    { font-weight: var(--weight-black); }

.leading-tight   { line-height: var(--leading-tight); }
.leading-snug    { line-height: var(--leading-snug); }
.leading-normal  { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

.tracking-wide    { letter-spacing: var(--tracking-wide); }
.tracking-wider   { letter-spacing: var(--tracking-wider); }
.tracking-widest  { letter-spacing: var(--tracking-widest); }

.uppercase    { text-transform: uppercase; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

/* ── Color Utilities ── */
.text-navy     { color: var(--color-navy); }
.text-gold     { color: var(--color-gold); }
.text-ink      { color: var(--color-ink); }
.text-soft     { color: var(--color-ink-soft); }
.text-muted    { color: var(--color-ink-muted); }
.text-white    { color: var(--color-white); }
.text-cream    { color: var(--color-cream); }

.bg-navy      { background-color: var(--color-navy); }
.bg-navy-mid  { background-color: var(--color-navy-mid); }
.bg-cream     { background-color: var(--color-cream); }
.bg-white     { background-color: var(--color-white); }
.bg-mint      { background-color: var(--color-mint); }
.bg-gold-pale { background-color: var(--color-gold-pale); }

/* ── Selection ── */
::selection {
  background-color: var(--color-gold-pale);
  color: var(--color-navy);
}

/* ── Focus Ring ── */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-cream); }
::-webkit-scrollbar-thumb { background: var(--color-navy-light); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-navy); }

/* ── Visually Hidden (a11y) ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}