/* =====================================================================
   DostiSpot design tokens — spec §14/§15 (light) + tuned dark theme.
   Theme is set on <html data-theme="light|dark"> by an inline script;
   the media query below is the no-JS fallback.
   ===================================================================== */
:root {
  color-scheme: light;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Brand */
  --c-primary: #1877F2;
  --c-primary-600: #1366D6;
  --c-primary-700: #0F55B5;
  --c-primary-50: #EAF3FF;
  --c-primary-100: #D6E8FF;
  --c-on-primary: #FFFFFF;
  --c-ink: #0F172A;

  /* Surfaces & text */
  --c-bg: #F5F7FA;
  --c-surface: #FFFFFF;
  --c-surface-2: #F8FAFC;
  --c-surface-3: #EEF2F6;
  --c-overlay: rgba(15, 23, 42, .55);
  --c-border: #E5E9F0;
  --c-border-strong: #D3DAE4;
  --c-text: #111827;
  --c-text-2: #64748B;
  --c-text-3: #94A3B8;

  /* Status */
  --c-success: #16A34A;
  --c-success-50: #EAF8EF;
  --c-warning: #F59E0B;
  --c-warning-50: #FEF5E6;
  --c-error: #DC2626;
  --c-error-50: #FDECEC;
  --c-info: #0EA5E9;
  --c-info-50: #E7F6FD;

  /* Premium (monetization areas only — spec §14) */
  --c-premium: #7C3AED;
  --c-premium-600: #6D28D9;
  --c-premium-50: #F4EFFF;
  --g-premium: linear-gradient(135deg, #7C3AED 0%, #A855F7 55%, #C084FC 100%);
  --g-premium-soft: linear-gradient(135deg, rgba(124, 58, 237, .10), rgba(168, 85, 247, .06));
  --g-brand: linear-gradient(135deg, #1877F2 0%, #3B9BFF 100%);

  /* Reactions */
  --c-like: #1877F2;
  --c-love: #E11D48;

  /* Shape */
  --r-xs: 6px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .06);
  --sh-2: 0 4px 14px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .05);
  --sh-3: 0 18px 50px rgba(15, 23, 42, .18), 0 4px 12px rgba(15, 23, 42, .08);
  --ring: 0 0 0 3px rgba(24, 119, 242, .28);

  /* Layout */
  --topbar-h: 58px;
  --bottombar-h: 60px;
  --nav-w: 272px;
  --rail-w: 320px;
  --feed-w: 640px;
  --gutter: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 120ms;
  --t: 200ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-primary: #3B8BFF;
  --c-primary-600: #5B9DFF;
  --c-primary-700: #7DB2FF;
  --c-primary-50: rgba(59, 139, 255, .14);
  --c-primary-100: rgba(59, 139, 255, .24);
  --c-ink: #E5E7EB;

  --c-bg: #0B1220;
  --c-surface: #111A2E;
  --c-surface-2: #16213A;
  --c-surface-3: #1C2842;
  --c-overlay: rgba(2, 6, 16, .72);
  --c-border: #22304D;
  --c-border-strong: #2E3F62;
  --c-text: #E5E7EB;
  --c-text-2: #94A3B8;
  --c-text-3: #64748B;

  --c-success: #22C55E;
  --c-success-50: rgba(34, 197, 94, .14);
  --c-warning: #FBBF24;
  --c-warning-50: rgba(251, 191, 36, .14);
  --c-error: #F87171;
  --c-error-50: rgba(248, 113, 113, .14);
  --c-info: #38BDF8;
  --c-info-50: rgba(56, 189, 248, .14);

  --c-premium: #A78BFA;
  --c-premium-600: #C4B5FD;
  --c-premium-50: rgba(167, 139, 250, .14);
  --g-premium-soft: linear-gradient(135deg, rgba(167, 139, 250, .16), rgba(192, 132, 252, .08));

  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 6px 18px rgba(0, 0, 0, .45);
  --sh-3: 0 22px 60px rgba(0, 0, 0, .6);
  --ring: 0 0 0 3px rgba(59, 139, 255, .38);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --c-primary: #3B8BFF;
    --c-primary-50: rgba(59, 139, 255, .14);
    --c-bg: #0B1220;
    --c-surface: #111A2E;
    --c-surface-2: #16213A;
    --c-surface-3: #1C2842;
    --c-border: #22304D;
    --c-text: #E5E7EB;
    --c-text-2: #94A3B8;
    --c-text-3: #64748B;
  }
}