/* ================================================================
   Design Tokens — Portfolio-wide
   Shared system. Site paletteleri data-site attribute ile override.
   ================================================================ */

:root {
  /* ----- Type ----- */
  --font-display: "Fraunces", "Cormorant Garamond", "Playfair Display",
    ui-serif, Georgia, serif;
  --font-body: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular,
    Menlo, monospace;

  /* Fluid type scale — mobile-first, generous desktop */
  --step-fine:   clamp(11px, 0.69rem + 0.1vw, 12px);
  --step-xs:     clamp(12px, 0.75rem + 0.1vw, 13px);
  --step-sm:     clamp(13px, 0.8rem + 0.15vw, 14px);
  --step-0:      clamp(15px, 0.9rem + 0.2vw, 17px);
  --step-1:      clamp(17px, 1rem + 0.25vw, 19px);
  --step-2:      clamp(20px, 1.1rem + 0.5vw, 24px);
  --step-3:      clamp(24px, 1.25rem + 1vw, 32px);
  --step-4:      clamp(30px, 1.5rem + 2vw, 44px);
  --step-5:      clamp(38px, 1.8rem + 3.2vw, 64px);
  --step-6:      clamp(48px, 2.2rem + 4.8vw, 88px);

  /* Named aliases used throughout site stylesheets.
     md: body-large / card title size · lg: card heading / large body size. */
  --step-md:     clamp(18px, 1.05rem + 0.3vw, 20px);
  --step-lg:     clamp(22px, 1.2rem + 0.7vw, 28px);

  --leading-tight:  1.05;
  --leading-snug:   1.18;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;
  --tracking-tight: -0.022em;
  --tracking-snug:  -0.012em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.14em;

  /* ----- Space scale (4px base) ----- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 112px;
  --s-13: 144px;

  /* ----- Radii ----- */
  --r-1:  4px;
  --r-2:  8px;
  --r-3:  12px;
  --r-4:  16px;
  --r-5:  20px;
  --r-6:  28px;
  --r-pill: 999px;

  /* ----- Shadows (subtle, editorial) ----- */
  --shadow-xs: 0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow-sm: 0 2px 8px rgba(17, 17, 17, 0.05), 0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow-md: 0 8px 24px rgba(17, 17, 17, 0.07), 0 2px 6px rgba(17, 17, 17, 0.04);
  --shadow-lg: 0 24px 64px rgba(17, 17, 17, 0.12), 0 4px 12px rgba(17, 17, 17, 0.06);
  --shadow-xl: 0 40px 100px rgba(17, 17, 17, 0.18);

  /* ----- Motion ----- */
  --ease-out-soft: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out-firm: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 380ms;
  --t-langer: 560ms;

  /* ----- Container ----- */
  --container-xs: 520px;
  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1360px;
  --container-2xl: 1480px;

  --page-gutter: clamp(20px, 4vw, 48px);
  --section-y:   clamp(64px, 10vw, 128px);
  --section-y-sm: clamp(40px, 7vw, 88px);
  --section-y-lg: clamp(80px, 12vw, 160px);

  /* ----- Z layers ----- */
  --z-base: 1;
  --z-sticky: 20;
  --z-header: 40;
  --z-overlay: 60;
  --z-modal: 80;
  --z-toast: 100;

  /* ----- Accessibility ----- */
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

/* ================================================================
   SITE PALETTE 01 — Hagia Sophia (clarity-first, warm stone + gold)
   ================================================================ */
:root[data-site="hagia-sophia"] {
  --color-bg:         oklch(98.2% 0.008 78);      /* warm paper */
  --color-bg-alt:     oklch(96% 0.012 78);        /* subtle stone */
  --color-bg-deep:    oklch(93% 0.016 76);        /* deeper warm stone */
  --color-surface:    oklch(100% 0 0);
  --color-ink:        oklch(21% 0.014 55);        /* deep warm ink */
  --color-ink-soft:   oklch(34% 0.012 55);
  --color-muted:      oklch(52% 0.008 55);
  --color-line:       oklch(88% 0.012 72);
  --color-line-soft:  oklch(93% 0.008 72);

  --color-accent:     oklch(58% 0.11 74);         /* muted gold */
  --color-accent-ink: oklch(38% 0.09 70);
  --color-accent-soft:oklch(92% 0.04 80);
  --color-accent-contrast: oklch(99% 0.005 80);

  --color-secondary:  oklch(38% 0.05 160);        /* deep green byzantine */

  --hero-tint:        linear-gradient(180deg, oklch(97% 0.015 76) 0%, oklch(93% 0.018 74) 100%);
  --site-display-weight: 420;
  --site-heading-tracking: -0.018em;
}

/* ================================================================
   SITE PALETTE 02 — Topkapı Palace (imperial prestige)
   ================================================================ */
:root[data-site="topkapi-palace"] {
  --color-bg:         oklch(97% 0.012 88);        /* ivory */
  --color-bg-alt:     oklch(94% 0.018 90);
  --color-bg-deep:    oklch(26% 0.04 150);        /* deep emerald surface */
  --color-surface:    oklch(99% 0.006 88);
  --color-ink:        oklch(20% 0.025 160);       /* deep emerald ink */
  --color-ink-soft:   oklch(34% 0.03 160);
  --color-muted:      oklch(50% 0.02 130);
  --color-line:       oklch(86% 0.016 100);
  --color-line-soft:  oklch(92% 0.012 100);

  --color-accent:     oklch(64% 0.13 62);         /* imperial gold */
  --color-accent-ink: oklch(42% 0.11 60);
  --color-accent-soft:oklch(93% 0.045 80);
  --color-accent-contrast: oklch(99% 0.005 80);

  --color-secondary:  oklch(34% 0.09 22);         /* bordeaux */

  --hero-tint:        linear-gradient(180deg, oklch(95% 0.02 90) 0%, oklch(88% 0.035 88) 100%);
  --site-display-weight: 440;
  --site-heading-tracking: -0.02em;
}

/* ================================================================
   SITE PALETTE 03 — Basilica Cistern (atmospheric precision)
   ================================================================ */
:root[data-site="basilica-cistern"] {
  --color-bg:         oklch(17% 0.012 230);       /* deep cistern */
  --color-bg-alt:     oklch(21% 0.014 228);
  --color-bg-deep:    oklch(12% 0.014 234);
  --color-surface:    oklch(24% 0.015 228);
  --color-ink:        oklch(96% 0.01 90);         /* warm ivory text */
  --color-ink-soft:   oklch(84% 0.012 90);
  --color-muted:      oklch(66% 0.015 90);
  --color-line:       oklch(34% 0.016 228);
  --color-line-soft:  oklch(28% 0.014 228);

  --color-accent:     oklch(70% 0.12 50);         /* bronze */
  --color-accent-ink: oklch(78% 0.12 52);
  --color-accent-soft:oklch(30% 0.04 52);
  --color-accent-contrast: oklch(15% 0.02 230);

  --color-secondary:  oklch(58% 0.06 180);        /* water green */

  --hero-tint:        linear-gradient(180deg, oklch(14% 0.012 232) 0%, oklch(22% 0.016 226) 100%);
  --site-display-weight: 420;
  --site-heading-tracking: -0.018em;
}

/* ================================================================
   SITE PALETTE 04 — Bosphorus (contemporary selector)
   ================================================================ */
:root[data-site="bosphorus"] {
  --color-bg:         oklch(98% 0.006 240);       /* airy paper */
  --color-bg-alt:     oklch(95% 0.012 240);
  --color-bg-deep:    oklch(22% 0.05 248);        /* marine navy */
  --color-surface:    oklch(100% 0 0);
  --color-ink:        oklch(22% 0.04 248);
  --color-ink-soft:   oklch(36% 0.03 248);
  --color-muted:      oklch(52% 0.016 240);
  --color-line:       oklch(87% 0.012 240);
  --color-line-soft:  oklch(93% 0.008 240);

  --color-accent:     oklch(66% 0.15 50);         /* sunset amber */
  --color-accent-ink: oklch(48% 0.14 48);
  --color-accent-soft:oklch(94% 0.04 70);
  --color-accent-contrast: oklch(99% 0 0);

  --color-secondary:  oklch(44% 0.11 248);        /* marine */

  --hero-tint:        linear-gradient(180deg, oklch(96% 0.01 240) 0%, oklch(90% 0.03 240) 100%);
  --site-display-weight: 440;
  --site-heading-tracking: -0.02em;
}

/* ================================================================
   SITE PALETTE 05 — Whirling Dervish (quiet reverence)
   ================================================================ */
:root[data-site="whirling-dervish"] {
  --color-bg:         oklch(97% 0.01 70);         /* cream */
  --color-bg-alt:     oklch(94% 0.012 70);
  --color-bg-deep:    oklch(15% 0.01 50);         /* near-black, warm */
  --color-surface:    oklch(99% 0.006 70);
  --color-ink:        oklch(18% 0.012 50);
  --color-ink-soft:   oklch(34% 0.014 50);
  --color-muted:      oklch(52% 0.012 50);
  --color-line:       oklch(86% 0.014 68);
  --color-line-soft:  oklch(92% 0.01 68);

  --color-accent:     oklch(58% 0.14 48);         /* copper */
  --color-accent-ink: oklch(42% 0.12 46);
  --color-accent-soft:oklch(93% 0.04 64);
  --color-accent-contrast: oklch(99% 0.005 60);

  --color-secondary:  oklch(34% 0.03 50);         /* deep warm */

  --hero-tint:        linear-gradient(180deg, oklch(96% 0.012 70) 0%, oklch(91% 0.018 68) 100%);
  --site-display-weight: 400;
  --site-heading-tracking: -0.014em;
}

/* Default fallback (for navigator etc.) = neutral system */
:root:not([data-site]) {
  --color-bg:         oklch(98% 0.005 80);
  --color-bg-alt:     oklch(95% 0.008 80);
  --color-bg-deep:    oklch(18% 0.01 250);
  --color-surface:    oklch(100% 0 0);
  --color-ink:        oklch(20% 0.01 250);
  --color-ink-soft:   oklch(34% 0.012 250);
  --color-muted:      oklch(54% 0.01 250);
  --color-line:       oklch(88% 0.008 250);
  --color-line-soft:  oklch(93% 0.006 250);
  --color-accent:     oklch(58% 0.12 50);
  --color-accent-ink: oklch(40% 0.1 50);
  --color-accent-soft:oklch(93% 0.04 70);
  --color-accent-contrast: oklch(99% 0 0);
  --color-secondary:  oklch(40% 0.08 250);
  --hero-tint:        linear-gradient(180deg, oklch(96% 0.006 240) 0%, oklch(92% 0.01 240) 100%);
  --site-display-weight: 420;
  --site-heading-tracking: -0.018em;
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}