/* SOCETIFY V2 — dizayn tokenlari.
 *
 * Palitra: "Chuqur kosmos" (tanlangan variant A).
 * Bu fayl faqat qiymatlarni e'lon qiladi — hech qanday komponent yo'q.
 * Komponentlar: components.css, tartib: base.css.
 *
 * Qoida: shablonlarda tayyor rang yozilmaydi (masalan #3FD2FF), faqat
 * shu yerdagi o'zgaruvchilar ishlatiladi. Shunda palitra bir joydan
 * boshqariladi va yorug' rejim o'zi ishlaydi.
 */

:root {
  color-scheme: dark;

  /* ------------------------------------------------ brend shkalasi */
  /* Moviy (asosiy urg'u) */
  --sky-50:  #EAFBFF;
  --sky-100: #C6F3FF;
  --sky-200: #9DE9FF;
  --sky-300: #7FE6FF;
  --sky-400: #5ADCFF;
  --sky-500: #3FD2FF;   /* asosiy */
  --sky-600: #1FA8DB;
  --sky-700: #157FAB;
  --sky-800: #0E5878;
  --sky-900: #093A50;

  /* Binafsha (ikkilamchi) */
  --violet-100: #E3DBFF;
  --violet-300: #B9A6FF;
  --violet-500: #7B5CFF;  /* ikkilamchi */
  --violet-600: #6541E6;
  --violet-700: #4E2FBB;
  --violet-900: #2A1870;

  /* ------------------------------------------------ fon va sathlar */
  --bg-void:    #05070F;   /* eng chuqur fon — sahna orqasi */
  --bg:         #070A16;   /* sahifa foni */
  --bg-raised:  #0B1022;   /* panel, modal */
  --bg-sunken:  #03050C;   /* kirish maydoni ichi */

  --surface:        rgba(255, 255, 255, .04);
  --surface-strong: rgba(255, 255, 255, .07);
  --surface-hover:  rgba(255, 255, 255, .10);
  --glass:          rgba(12, 18, 38, .62);

  --line:        rgba(150, 180, 230, .14);
  --line-strong: rgba(150, 180, 230, .26);
  --line-neon:   rgba(63, 210, 255, .38);

  /* ------------------------------------------------ matn */
  --text:      #E8F1FF;
  --text-soft: #9FB2D4;
  --text-dim:  #6A7C9E;
  --text-on-accent: #04121B;

  /* ------------------------------------------------ holat ranglari */
  --ok:     #3BE8A5;
  --ok-bg:  rgba(59, 232, 165, .13);
  --warn:   #FFC24B;
  --warn-bg: rgba(255, 194, 75, .13);
  --danger: #FF6B8A;
  --danger-bg: rgba(255, 107, 138, .13);
  --info-bg: rgba(63, 210, 255, .12);

  /* ------------------------------------------------ urg'u va yorug'lik */
  --accent-gradient: linear-gradient(96deg, var(--sky-400), var(--violet-500));
  --accent-gradient-soft: linear-gradient(96deg, rgba(63,210,255,.22), rgba(123,92,255,.22));
  --glow-sky:    0 0 0 1px rgba(63, 210, 255, .35), 0 14px 44px rgba(31, 168, 219, .30);
  --glow-violet: 0 0 0 1px rgba(123, 92, 255, .35), 0 14px 44px rgba(101, 65, 230, .30);
  --shadow:    0 18px 44px rgba(2, 5, 14, .55);
  --shadow-lg: 0 34px 80px rgba(2, 5, 14, .65);

  /* ------------------------------------------------ tartib */
  /* Kontent 80vw: chap va o'ngda 10% zaxira. Juda keng ekranda cheklanadi. */
  --gutter: clamp(16px, 10vw, 180px);
  --content: calc(100vw - (var(--gutter) * 2));
  --scene-height: 100svh;
  --grid-gap: clamp(12px, 1.2vw, 28px);
  --rail-width: 4.5rem;

  --r-xs: 4px;
  --r-sm: 10px;
  --r-md: 22px;
  --r-lg: 40px;
  --r-pill: 999px;

  /* ------------------------------------------------ tipografika */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-base: clamp(15px, 0.52vw + 12px, 19px);
  --text-sm:   clamp(13px, 0.3vw + 11px, 15px);
  --text-xs:   clamp(11px, 0.2vw + 10px, 13px);
  --text-lg:   clamp(18px, 0.7vw + 14px, 24px);
  --h3: clamp(1.15rem, 1vw + .8rem, 1.6rem);
  --h2: clamp(1.7rem, 2.4vw + .6rem, 3.2rem);
  --h1: clamp(2.4rem, 5.2vw, 7rem);
  --tracking-tight: -0.03em;
  --tracking-wide: 0.14em;

  /* ------------------------------------------------ harakat */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .16s;
  --dur: .28s;
  --dur-slow: .6s;
  --scene-lerp: .085;   /* kamera silliqligi (stage/index.js o'qiydi) */

  --z-stage: 0;
  --z-content: 1;
  --z-header: 20;
  --z-overlay: 60;
  --z-toast: 80;
}

/* Yorug' rejim — ikkinchi darajali, lekin to'liq ishlaydi. */
[data-theme='light'] {
  color-scheme: light;
  --bg-void:   #EEF3FB;
  --bg:        #F6F9FE;
  --bg-raised: #FFFFFF;
  --bg-sunken: #FFFFFF;

  --surface:        #FFFFFF;
  --surface-strong: #FFFFFF;
  --surface-hover:  #EFF4FC;
  --glass:          rgba(255, 255, 255, .78);

  --line:        rgba(12, 25, 50, .10);
  --line-strong: rgba(12, 25, 50, .20);
  --line-neon:   rgba(21, 127, 171, .35);

  --text:      #0A1426;
  --text-soft: #46587A;
  --text-dim:  #7386A6;
  --text-on-accent: #FFFFFF;

  --accent-gradient: linear-gradient(96deg, var(--sky-600), var(--violet-600));
  --glow-sky:    0 0 0 1px rgba(21, 127, 171, .22), 0 12px 30px rgba(21, 127, 171, .16);
  --shadow:    0 14px 32px rgba(12, 25, 50, .10);
  --shadow-lg: 0 26px 60px rgba(12, 25, 50, .14);
}

/* Harakatni kamaytirish so'ralgan bo'lsa — 3D va animatsiyalar o'chadi. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0s;
    --dur: 0s;
    --dur-slow: 0s;
    --scene-lerp: 1;
  }
}