/* =========================================================
   tokens.css — design tokens, reset, base typography,
   utility classes (gradients), shared keyframes.
   ========================================================= */

:root{
  /* ----- Brand palette ----- */
  /* Primary: #92278f mor, secondary: #242b46 koyu mavi, borders: #e7e6e6 gri.
     Variable names kept for backwards compatibility; values mapped to new palette.
     Functional exceptions: --gold (sponsor/star), --red (emergency). */
  --orange:#92278f;        /* primary brand: mor */
  --orange-700:#7A1F77;
  --orange-50:#F5E6F4;
  --teal:#242b46;          /* maps to koyu mavi */
  --aqua:#3a4163;          /* koyu mavi varyant */
  --gold:#F5B820;          /* functional: sponsor / star */
  --gold-700:#D9A012;
  --gold-50:#FDF4DA;
  --purple:#5d3793;        /* mor-mavi ara ton */
  --red:#E04A3F;           /* functional: emergency */
  --red-700:#B83A30;

  /* ----- Surfaces ----- */
  --bg:#FFFFFF;
  --cream:#F4F3F6;
  --cream-2:#ECEBF0;
  --line:#e7e6e6;
  --line-2:#d4d3d3;

  /* Semantic surfaces (theme-aware) */
  --surface:#FFFFFF;                       /* card / sheet / drawer / non-glass top-bar */
  --surface-2:#F4F3F6;                     /* sub-surface */
  --surface-glass:rgba(255,255,255,.92);   /* sticky home-header */
  --surface-glass-strong:rgba(255,255,255,.96); /* top-bar / bottom-nav */
  --app-bg:#EDECEF;                        /* body background + skeleton */
  --scrim:rgba(20,20,24,.50);

  /* ----- Text ----- */
  --ink:#242b46;
  --ink-2:#3a4163;
  --muted:#6e6f7d;
  --muted-2:#9b9caa;

  /* ----- Radius ----- */
  --radius-card:14px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-pill:999px;
  --radius-sm:6px;

  /* ----- Shadows ----- */
  --shadow-card:0 4px 20px rgba(0,0,0,.08);
  --shadow-soft:0 2px 10px rgba(0,0,0,.05);
  --shadow-pop:0 12px 30px rgba(0,0,0,.14);
  --shadow-gold:0 0 0 2px var(--gold), 0 10px 28px rgba(245,184,32,.22);
  --shadow-orange:0 12px 26px rgba(146,39,143,.30);
  --shadow-red:0 10px 24px rgba(224,74,63,.28);

  /* ----- Gradients (mor <-> koyu mavi tonlar) ----- */
  --hero-gradient:linear-gradient(135deg,#92278f 0%,#242b46 100%);
  --grad-teal-aqua:linear-gradient(135deg,#242b46,#3a4163);
  --grad-purple-orange:linear-gradient(135deg,#5d3793,#92278f);
  --grad-orange-gold:linear-gradient(135deg,#92278f,#242b46);
  --grad-aqua-gold:linear-gradient(135deg,#3a4163,#242b46);
  --grad-purple-teal:linear-gradient(135deg,#5d3793,#242b46);
  --grad-gold-orange:linear-gradient(135deg,#242b46,#92278f);
  --grad-teal-purple:linear-gradient(135deg,#242b46,#5d3793);
  --grad-red:linear-gradient(135deg,#E04A3F,#F5B820);
  --grad-cream:linear-gradient(180deg,#FFFFFF 0%,#F4F3F6 100%);

  /* ----- Safe-area insets ----- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ----- Motion ----- */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in:  cubic-bezier(.4,0,.2,1);
  --dur-fast: 160ms;
  --dur:      250ms;
  --dur-slow: 320ms;
}

/* ----- Reset ----- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
html{ height:100%; }
body{
  font-family:'Outfit', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:var(--ink);
  background:var(--app-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  height:100vh;
  height:100dvh;
  display:flex;
  justify-content:center;
  overflow:hidden;
  overscroll-behavior:none;
}
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; touch-action:manipulation; }
input,textarea,select{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:rgba(146,39,143,.18); }

/* ----- Utility: brand gradients ----- */
.grad-orange-gold  { background:var(--grad-orange-gold); }
.grad-teal-aqua    { background:var(--grad-teal-aqua); }
.grad-purple-orange{ background:var(--grad-purple-orange); }
.grad-aqua-gold    { background:var(--grad-aqua-gold); }
.grad-purple-teal  { background:var(--grad-purple-teal); }
.grad-gold-orange  { background:var(--grad-gold-orange); }
.grad-teal-purple  { background:var(--grad-teal-purple); }
.grad-red          { background:var(--grad-red); }

/* ----- Hide scrollbar utility ----- */
.no-scrollbar{ scrollbar-width:none; -ms-overflow-style:none; }
.no-scrollbar::-webkit-scrollbar{ display:none; }

/* ----- Horizontal scroller ----- */
.hscroll{
  display:flex; gap:10px;
  overflow-x:scroll;
  /* scroll-snap-type:x proximity; */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:4px 16px 8px;
}
.hscroll::-webkit-scrollbar{ display:none; }
.hscroll > *{ scroll-snap-align:start; flex:0 0 auto; }

/* ----- Shared keyframes ----- */
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:none; }
}
@keyframes slideInRight{
  from{ opacity:0; transform:translateX(24px); }
  to  { opacity:1; transform:none; }
}
@keyframes slideInLeft{
  from{ opacity:0; transform:translateX(-24px); }
  to  { opacity:1; transform:none; }
}
@keyframes pop{
  0%  { transform:scale(1); }
  40% { transform:scale(1.18); }
  100%{ transform:scale(1); }
}
@keyframes pulseRed{
  0%  { box-shadow:0 0 0 0 rgba(224,74,63,.55); }
  100%{ box-shadow:0 0 0 14px rgba(224,74,63,0); }
}
@keyframes shimmer{
  0%  { background-position:-180px 0; }
  100%{ background-position:180px 0; }
}
@keyframes sheetUp{
  from{ transform:translate(-50%, 100%); }
  to  { transform:translate(-50%, 0); }
}
@keyframes backdropIn{
  from{ opacity:0; }
  to  { opacity:1; }
}
@keyframes heroProgress{
  from{ width:0; }
  to  { width:100%; }
}

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

/* =========================================================
   Dark theme — token overrides only.
   Brand colors (--orange, --teal, --gold, --red) and all
   .grad-* gradients stay identical in both themes.
   ========================================================= */
[data-theme="dark"]{
  --bg:#0F1117;
  --cream:#15171F;
  --cream-2:#1B1E29;
  --line:#272A37;
  --line-2:#363A4B;

  --ink:#EDEDF2;
  --ink-2:#C5C6D0;
  --muted:#8E8FA0;
  --muted-2:#5E6072;

  --surface:#181B25;
  --surface-2:#1F2230;
  --surface-glass:rgba(15,17,23,.78);
  --surface-glass-strong:rgba(15,17,23,.88);
  --app-bg:#0A0C12;
  --scrim:rgba(0,0,0,.62);

  --shadow-card:0 4px 20px rgba(0,0,0,.45);
  --shadow-soft:0 2px 10px rgba(0,0,0,.40);
  --shadow-pop:0 12px 30px rgba(0,0,0,.55);
}
[data-theme="dark"] body{ background:var(--app-bg); }
[data-theme="dark"] ::selection{ background:rgba(146,39,143,.40); }

/* ----- Logo swap (CSS-only, no FOUC: data-theme set inline before CSS loads) ----- */
.logo-img-dark{ display:none; }
[data-theme="dark"] .logo-img-light{ display:none; }
[data-theme="dark"] .logo-img-dark { display:inline-block; }