/*
 * Only scan application source files for Tailwind classes.
 * The project also contains a large image/archive tree which must not be
 * watched or parsed by the development compiler.
 */
@import "tailwindcss" source(none);
@source "../app";
@source "../components";
@source "../hooks";

/* ============================================================
   TAILWIND THEME BRIDGE
   ============================================================ */
@theme {
  --font-sans: var(--font-outfit), system-ui, sans-serif;
  --font-serif: var(--font-outfit), system-ui, sans-serif;
  --font-mono: var(--font-outfit), system-ui, sans-serif;

  /* Color tokens mapped to CSS variables (theme-aware) */
  --color-surface-0:   var(--surface-0);
  --color-surface-1:   var(--surface-1);
  --color-surface-2:   var(--surface-2);
  --color-border:      var(--border);
  --color-ember:       var(--ember);
  --color-ember-bright: var(--ember-bright);
  --color-ember-muted:  var(--ember-muted);
  --color-fg-primary:   var(--fg-primary);
  --color-fg-secondary: var(--fg-secondary);
  --color-fg-muted:     var(--fg-muted);

  /* Legacy aliases (for backward compatibility) */
  --color-bg-void:   var(--surface-0);
  --color-bg-panel:  var(--surface-1);
  --color-text-primary:   var(--fg-primary);
  --color-text-secondary: var(--fg-secondary);
  --color-text-muted:     var(--fg-muted);
}

/* ============================================================
   DESIGN TOKENS — DARK THEME (default, anthracite palette)
   ============================================================ */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces — antrasit katmanlar */
  --surface-0: #111113;   /* Ana zemin — çok koyu antrasit */
  --surface-1: #1A1A1F;   /* Kart, panel arka planı */
  --surface-2: #232328;   /* Hover, raised surface */
  --border:    rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.14);

  /* Accent — amber/pirinç */
  --ember:        #C4935A;
  --ember-bright: #EDBA7C;
  --ember-muted:  #7A5E38;

  /* Typography */
  --fg-primary:   #ECECF0;
  --fg-secondary: #A9A9B8;
  --fg-muted:     #616174;

  /* Glass effects */
  --glass-bg:     rgba(17, 17, 19, 0.82);
  --glass-border: rgba(255,255,255,0.06);
}

/* ============================================================
   DESIGN TOKENS — LIGHT THEME
   ============================================================ */
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --surface-0: #F2F2F5;
  --surface-1: #FFFFFF;
  --surface-2: #E8E8EE;
  --border:    rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.16);

  /* Accent remains */
  --ember:        #B5803A;
  --ember-bright: #D49840;
  --ember-muted:  #8A5F28;

  /* Typography */
  --fg-primary:   #111113;
  --fg-secondary: #4A4A5A;
  --fg-muted:     #888898;

  /* Glass effects */
  --glass-bg:     rgba(255, 255, 255, 0.82);
  --glass-border: rgba(0,0,0,0.07);
}

/* Refined Norden palette and component depth tokens. */
:root,
[data-theme="dark"] {
  --surface-0: #0B0D10;
  --surface-1: #12151A;
  --surface-2: #1A1E24;
  --border: rgba(255,255,255,0.075);
  --border-strong: rgba(255,255,255,0.16);
  --ember: #D5A363;
  --ember-bright: #F1C486;
  --ember-muted: #8A673E;
  --accent-border: rgba(213,163,99,0.55);
  --fg-primary: #F4F1EB;
  --fg-secondary: #B2B4BC;
  --fg-muted: #737782;
  --glass-bg: rgba(13,15,19,0.76);
  --glass-border: rgba(255,255,255,0.09);
  --category-overlay: linear-gradient(180deg, rgba(8,10,13,0.08) 10%, rgba(8,10,13,0.25) 44%, rgba(8,10,13,0.96) 100%);
  --card-fg: #F7F3EC;
  --card-secondary: #C4C3C0;
  --shadow-card: 0 24px 70px rgba(0,0,0,0.3);
  --shadow-card-hover: 0 28px 90px rgba(0,0,0,0.48), 0 0 0 1px rgba(213,163,99,0.08);
}

[data-theme="light"] {
  --surface-0: #F4F1EA;
  --surface-1: #FCFAF6;
  --surface-2: #EAE5DC;
  --border: rgba(39,34,27,0.1);
  --border-strong: rgba(39,34,27,0.2);
  --ember: #A56D2C;
  --ember-bright: #C2853D;
  --ember-muted: #7E592E;
  --accent-border: rgba(165,109,44,0.5);
  --fg-primary: #191714;
  --fg-secondary: #59544D;
  --fg-muted: #8B847A;
  --glass-bg: rgba(252,250,246,0.82);
  --glass-border: rgba(39,34,27,0.11);
  --category-overlay: linear-gradient(180deg, rgba(18,16,13,0.05) 8%, rgba(18,16,13,0.18) 45%, rgba(18,16,13,0.9) 100%);
  --card-fg: #FFFDF8;
  --card-secondary: #D7D2C9;
  --shadow-card: 0 24px 70px rgba(68,53,34,0.13);
  --shadow-card-hover: 0 32px 90px rgba(68,53,34,0.2), 0 0 0 1px rgba(165,109,44,0.1);
}

/* Keep theme-dependent navbar markup identical during SSR and hydration. */
.theme-logo-dark { display: block !important; }
.theme-logo-light { display: none !important; }

.theme-icon-sun {
  display: block;
}

.theme-icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-logo-dark { display: block !important; }
html[data-theme="dark"] .theme-logo-light { display: none !important; }
html[data-theme="light"] .theme-logo-dark { display: none !important; }
html[data-theme="light"] .theme-logo-light { display: block !important; }

[data-theme="light"] .theme-icon-sun {
  display: none;
}

[data-theme="light"] .theme-icon-moon {
  display: block;
}

/* ============================================================
   SPACING & TYPOGRAPHY SCALE
   ============================================================ */
:root {
  /* Spacing tokens */
  --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 */

  /* Typography scale */
  --text-2xs: 0.6rem;    /* 10px  — micro label */
  --text-xs:  0.6875rem; /* 11px  — eyebrow/tag */
  --text-sm:  0.875rem;  /* 14px  — small body  */
  --text-base: 1rem;     /* 16px  — body        */
  --text-lg:  1.125rem;  /* 18px  — lead text   */
  --text-xl:  1.375rem;  /* 22px  — card title  */
  --text-2xl: 1.75rem;   /* 28px  — section h3  */
  --text-3xl: 2.25rem;   /* 36px  — section h2  */
  --text-4xl: 3rem;      /* 48px  — hero h2     */
  --text-5xl: 3.75rem;   /* 60px  — hero h1     */

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Letter spacings */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.08em;
  --tracking-widest:   0.16em;

  /* Border radius */
  --radius-sm:  0.5rem;
  --radius-md:  0.75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.45), 0 4px 8px rgba(0,0,0,0.30);
  --shadow-xl:  0 24px 56px rgba(0,0,0,0.55);
  --shadow-ember: 0 0 30px rgba(196,147,90,0.15);

  /* Transitions */
  --ease-smooth:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   200ms;
  --duration-normal: 350ms;
  --duration-slow:   600ms;

  /* Font vars */
  --font-outfit: 'Outfit', system-ui, sans-serif;

  /* Section content max-width */
  --content-max: 80rem;  /* 1280px = 7xl */
  --content-px-sm: 1.5rem;  /* px-6  */
  --content-px-md: 3rem;    /* px-12 */
}

/* ============================================================
   CSS RESET & BASE
   ============================================================ */
@layer base {
*, *::before, *::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
  background-color: var(--surface-0);
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--fg-primary);
  background: var(--surface-0);
  font-family: var(--font-outfit), system-ui, sans-serif;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--duration-normal) var(--ease-in-out),
              color var(--duration-normal) var(--ease-in-out);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-outfit), system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
}

/* Serif headings via explicit class */
.font-serif h1,
.font-serif h2,
.font-serif h3,
h1.serif,
h2.serif {
  font-family: var(--font-outfit), system-ui, sans-serif;
  font-weight: 500;
}

code, pre, .font-mono {
  font-family: var(--font-outfit), system-ui, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) ease,
              opacity var(--duration-fast) ease;
}

a:hover {
  color: var(--ember-bright);
}

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

/* Public-site deterrence only. Browser-delivered media can still be obtained
   through developer tools or direct URLs; origin/hotlink control belongs at CDN. */
.norden-media-protected img:not([data-media-download-allowed="true"]) {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  color: var(--surface-0);
  background: var(--ember-bright);
}

:focus-visible {
  outline: 2px solid var(--ember-bright);
  outline-offset: 4px;
}
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Lightweight shared-shell motion. Complex catalogue stories keep their
   dedicated motion system; the always-present navbar/footer stay CSS-only. */
@keyframes norden-nav-enter {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes norden-popover-enter {
  from { opacity: 0; transform: translateY(-8px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes norden-mobile-panel-enter {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes norden-mobile-item-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes norden-view-enter {
  from {
    opacity: 0;
    transform: translate(var(--norden-reveal-x, 0), 20px);
  }
  to { opacity: 1; transform: translate(0, 0); }
}

.norden-nav-enter {
  animation: norden-nav-enter .8s cubic-bezier(.16, 1, .3, 1) both;
}

.norden-popover-enter {
  transform-origin: top right;
  animation: norden-popover-enter .15s ease-out both;
}

.norden-mobile-panel-enter {
  animation: norden-mobile-panel-enter .3s ease-out both;
}

.norden-mobile-item-enter {
  animation: norden-mobile-item-enter .3s ease-out both;
}

.norden-view-reveal-left { --norden-reveal-x: -30px; }
.norden-view-reveal-right { --norden-reveal-x: 30px; }

@supports (animation-timeline: view()) {
  .norden-view-reveal {
    animation: norden-view-enter 1s linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 85%;
  }
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* Consistent section wrapper */
.section-wrapper {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-px-sm);
}
@media (min-width: 768px) {
  .section-wrapper {
    padding-inline: var(--content-px-md);
  }
}

/* Eyebrow label — consistent across all sections */
.eyebrow {
  font-family: var(--font-outfit), system-ui, sans-serif;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ember);
  display: block;
  margin-bottom: var(--space-3);
}

/* Section headline */
.section-title {
  font-family: var(--font-outfit), system-ui, sans-serif;
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
}

.category-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2rem;
  padding-inline: 0.75rem;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 9999px;
  color: rgba(255,255,255,0.82);
  background: rgba(8,10,13,0.24);
  backdrop-filter: blur(14px);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}

/* ============================================================
   GLASSMORPHISM
   ============================================================ */
.liquid-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
}

.glass-pill {
  background: rgba(128,128,160,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  transition: all var(--duration-normal) var(--ease-smooth);
}

.glass-pill:hover {
  background: rgba(128,128,160,0.12);
  border-color: var(--ember);
}

/* ============================================================
   MARQUEE ANIMATIONS
   ============================================================ */
@keyframes marquee {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.animate-marquee:hover { animation-play-state: paused; }

.animate-marquee-slow {
  display: flex;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.animate-marquee-slow:hover { animation-play-state: paused; }

/* ============================================================
   HOVER ACCENT LINE EFFECT
   ============================================================ */
.hover-line-effect {
  position: relative;
}
.hover-line-effect::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-smooth);
}
.group:hover .hover-line-effect::after {
  transform: scaleX(1);
}

/* ============================================================
   SCROLL SNAP
   ============================================================ */
section {
  scroll-snap-align: start;
  scroll-margin-top: 80px;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface-0); }
::-webkit-scrollbar-thumb {
  background: var(--surface-2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ember); }

.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar { display: none; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}