/* ============================================================
   Koshvardoust Design System — Colors & Type
   جشنواره کشوردوست
   ============================================================ */

/* ---- Webfonts -------------------------------------------------- */
@font-face {
  font-family: "Morabba";
  src: url("./fonts/Morabba-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("./fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Additional weights of Vazirmatn pulled from Google Fonts — the local woff2
   covers Regular; the CDN supplies the rest of the ramp. */
@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;500;600;700;800&display=swap");

:root {
  /* -----------------------------------------------------------
     1. BRAND PRIMITIVES — keyed off the reference designs
     Dark navy stage + neon cyan→magenta→violet gradients +
     warm amber/gold for premium tiles.
     ----------------------------------------------------------- */

  /* Stage — deep navy/teal backdrop */
  --stage-950: #06090f;   /* deepest, around frame edge */
  --stage-900: #0a1018;   /* page background            */
  --stage-800: #111a26;   /* card surface               */
  --stage-700: #1a2434;
  --stage-600: #243049;
  --stage-500: #38476a;   /* hairlines / inactive       */
  --stage-300: #6f7d99;   /* muted text                 */
  --stage-100: #b6c2d6;   /* secondary text             */
  --stage-50:  #e6ecf6;   /* primary text on dark       */

  /* Neon gradient stops — the signature of the brand */
  --neon-cyan:    #4be3ff;
  --neon-mint:    #44e3b8;
  --neon-magenta: #ff4ea8;
  --neon-violet:  #9a6cff;
  --neon-blue:    #4f7bff;
  --neon-orange:  #ff8a3d;

  /* Warm gold — reward / premium tiles only (homage to logo) */
  --gold-50:  #fbecc6;
  --gold-100: #f5d589;
  --gold-300: #d4a64a;
  --gold-400: #c08a2e;
  --gold-500: #946217;
  --gold-700: #4a2f0a;

  /* Festival content-type accents (chips & glows) */
  --accent-magenta: var(--neon-magenta);
  --accent-violet:  var(--neon-violet);
  --accent-cyan:    var(--neon-cyan);
  --accent-mint:    var(--neon-mint);
  --accent-orange:  var(--neon-orange);
  --accent-gold:    var(--gold-300);

  /* Signature gradients — used as background washes & strokes */
  --grad-hero:    linear-gradient(135deg, #ff4ea8 0%, #9a6cff 50%, #4be3ff 100%);
  --grad-violet:  linear-gradient(135deg, #6c4cff 0%, #b94cff 100%);
  --grad-magenta: linear-gradient(135deg, #ff4ea8 0%, #ff8a3d 100%);
  --grad-cyan:    linear-gradient(135deg, #44e3b8 0%, #4be3ff 100%);
  --grad-gold:    linear-gradient(135deg, #f5d589 0%, #c08a2e 100%);
  --grad-warm:    linear-gradient(135deg, #ff8a3d 0%, #ff4ea8 100%);

  /* Neon glow tokens — outer shadow on accent surfaces */
  --glow-cyan:    0 0 22px rgba(75, 227, 255, 0.45);
  --glow-magenta: 0 0 22px rgba(255, 78, 168, 0.45);
  --glow-violet:  0 0 22px rgba(154, 108, 255, 0.45);
  --glow-mint:    0 0 22px rgba(68, 227, 184, 0.40);
  --glow-orange:  0 0 24px rgba(255, 138, 61, 0.45);
  --glow-gold:    0 0 22px rgba(212, 166, 74, 0.45);

  /* legacy aliases — kept so existing preview cards still resolve */
  --brand-gold-50:  var(--gold-50);
  --brand-gold-100: var(--gold-50);
  --brand-gold-200: var(--gold-100);
  --brand-gold-300: var(--gold-300);
  --brand-gold-400: var(--gold-300);
  --brand-gold-500: var(--gold-400);
  --brand-gold-600: var(--gold-500);
  --brand-gold-700: var(--gold-700);
  --brand-ink-500: var(--stage-500);
  --brand-ink-700: var(--stage-800);
  --brand-ink-900: var(--stage-900);
  --brand-cream-50: #1a2434;
  --brand-cream-100: #1a2434;

  /* -----------------------------------------------------------
     2. SEMANTIC TOKENS — DARK STAGE (canonical surface)
     The brand is dark-first per references. Light surface kept
     under .kd-light for the rare formal/profile screen.
     ----------------------------------------------------------- */
  --bg:          var(--stage-900);
  --bg-elev:     var(--stage-800);
  --bg-sunken:   var(--stage-950);
  --surface:     var(--stage-800);
  --surface-2:   var(--stage-700);

  --fg:          var(--stage-50);
  --fg-2:        var(--stage-100);
  --fg-3:        var(--stage-300);
  --fg-on-gold:  #1a1208;

  --line:        rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.18);

  --primary:        var(--neon-magenta);
  --primary-hover:  #ff66b8;
  --primary-press:  #e63d92;
  --primary-fg:     #1a0710;

  --success: var(--neon-mint);
  --warning: var(--neon-orange);
  --danger:  #ff5868;
  --info:    var(--neon-cyan);

  /* -----------------------------------------------------------
     3. SPACING / RADIUS / SHADOW / MOTION
     ----------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;     /* cards default                       */
  --radius-lg: 20px;     /* bento tiles                         */
  --radius-xl: 28px;
  --radius-pill: 999px;  /* filter pills, primary CTAs          */

  /* Layered shadow — deep & warm */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5),
              0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.6),
              0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-3: 0 24px 60px -12px rgba(0, 0, 0, 0.75),
              0 4px 10px rgba(0, 0, 0, 0.4);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* -----------------------------------------------------------
     4. TYPE TOKENS
     ----------------------------------------------------------- */
  --font-display: "Morabba", "Lalezar", "Vazirmatn", "Tahoma", serif;
  --font-body:    "Vazirmatn", "Tahoma", "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "Fira Code", monospace;

  --fs-display:  clamp(40px, 6vw, 72px);
  --fs-h1:       clamp(30px, 4vw, 44px);
  --fs-h2:       28px;
  --fs-h3:       22px;
  --fs-h4:       18px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-caption:  12px;

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.6;
  --lh-loose:  1.8;
}

/* -----------------------------------------------------------
   5. LIGHT SURFACE (heritage cream — rarely used now)
   Apply with class="kd-light" on a wrapper.
   ----------------------------------------------------------- */
.kd-light {
  --bg:          #fbf6e9;
  --bg-elev:     #ffffff;
  --bg-sunken:   #f5edd6;
  --surface:     #ffffff;
  --surface-2:   #fbf6e9;

  --fg:          #1a232a;
  --fg-2:        #2f3b43;
  --fg-3:        #6e7a82;

  --line:        rgba(47, 59, 67, 0.12);
  --line-strong: rgba(47, 59, 67, 0.24);

  --shadow-1: 0 1px 2px rgba(60, 40, 12, 0.06);
  --shadow-2: 0 6px 16px -6px rgba(60, 40, 12, 0.18);
  --shadow-3: 0 18px 40px -12px rgba(60, 40, 12, 0.28);
}

/* Backwards-compatibility alias */
.kd-dark { /* now identical to root */ }

/* -----------------------------------------------------------
   6. BASE ELEMENT STYLES
   ----------------------------------------------------------- */
html, body {
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  line-height: var(--lh-normal);
  color:       var(--fg);
  background:  var(--bg);
  direction:   rtl;
  text-align:  right;
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size:   var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 var(--space-4);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size:   var(--fs-h2);
  line-height: var(--lh-tight);
  font-weight: 500;
  margin: 0 0 var(--space-3);
}
h3, .h3 {
  font-family: var(--font-body);
  font-size:   var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: 700;
  margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-family: var(--font-body);
  font-size:   var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}

.display {
  font-family: var(--font-display);
  font-size:   var(--fs-display);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.02em;
}

p, .p {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}

small, .small  { font-size: var(--fs-small); line-height: var(--lh-snug); }
.caption       { font-size: var(--fs-caption); color: var(--fg-3); letter-spacing: 0.02em; }
.lead          { font-size: 18px; line-height: var(--lh-snug); color: var(--fg-2); }

code, .code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

a {
  color: var(--primary-hover);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--primary-press); text-decoration: underline; }

/* Glassmorphism panel utility — for menus / popups / wizards */
.kd-glass {
  background: rgba(17, 26, 38, 0.72);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
}

/* Capsule pill utility — used everywhere (filters, content-type tags) */
.kd-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  font-size: var(--fs-small);
  font-weight: 500;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--fg-2);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.kd-pill:hover     { border-color: var(--line-strong); color: var(--fg); }
.kd-pill[aria-pressed="true"], .kd-pill.is-active {
  background: var(--primary);
  color: var(--primary-fg);
  border-color: transparent;
}