/* ============================================================
   NoScroll Design Tokens — exact color palette from the app
   ============================================================ */

:root {
  /* Brand & Plans */
  --ns-primary:        #EC0D66;
  --ns-secondary:      #3742FF;
  --ns-curious:        #426EFF;
  --ns-block-all:      #FF5722;
  --ns-one-reel:       #FF9800;
  /* One Reel mode chrome (borders, rings) — theme-specific */
  --ns-one-reel-border:      #6026CE;
  --ns-one-reel-border-ring: rgba(96, 38, 206, 0.25);

  /* Backgrounds & Surfaces — Dark (Material 3 Expressive) */
  --ns-bg:                #00122B;
  --ns-surface:           #0A1E38;
  --ns-surface-lowest:    #050C1A;
  --ns-surface-low:       #0A1E38;
  --ns-surface-container: #102542;
  --ns-surface-high:      #182F50;
  --ns-surface-highest:   #233B5D;
  --ns-surface-var:       #072248;

  /* Text — Dark */
  --ns-text:           #F8FAFC;
  --ns-text-secondary: #CBD5E1;
  --ns-text-tertiary:  #94A3B8;

  /* Status */
  --ns-error:          #FFB4AB;
  --ns-on-error:       #690005;
  --ns-error-container:#93000A;
  --ns-on-error-container:#FFDAD6;
  --ns-success:        #B1F4AF;
  --ns-on-success:     #00390A;
  --ns-paused:         #FFB951;

  /* Borders */
  --ns-outline:        #8E9199;
  --ns-outline-var:    rgba(142, 145, 153, 0.2);

  /* Material specific tints */
  --ns-surface-tint:   #EC0D66;
  --ns-primary-container:    #4A0420;
  --ns-on-primary-container: #FBCFE8;
  --ns-on-primary:           #FFF9FA;

  /* Elevation shadows — Premium 2026 style */
  --shadow-1: 0 4px 12px 0 rgba(0,0,0,0.05);
  --shadow-2: 0 8px 24px -4px rgba(0,0,0,0.12), 0 4px 8px -4px rgba(0,0,0,0.08);
  --shadow-3: 0 20px 48px -12px rgba(0,0,0,0.25);
  --shadow-glow: 0 0 24px rgba(236,13,102,0.15);

  /* Radius — Material 3 Expressive */
  --r-xs:  4px;
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-2xl: 40px;
  --r-full: 9999px;

  /* Transitions — Spring-like feel */
  --transition: 400ms cubic-bezier(0.3, 0, 0, 1);
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);

  /* Spacing system — 4px baseline */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;
}

/* ── Light mode overrides ── */
[data-theme="light"] {
  --ns-bg:                #FDFBFF;
  --ns-surface:           #F3F3FA;
  --ns-surface-lowest:    #FFFFFF;
  --ns-surface-low:       #F7F3FA;
  --ns-surface-container: #EEEEF5;
  --ns-surface-high:      #E8E7EF;
  --ns-surface-highest:   #E2E2E9;
  --ns-surface-var:       #E7E0EB;

  --ns-text:           #1C1B1F;
  --ns-text-secondary: #49454F;
  --ns-text-tertiary:  #79747E;

  --ns-error:          #BA1A1A;
  --ns-on-error:       #FFFFFF;
  --ns-error-container:#FFDAD6;
  --ns-on-error-container:#410002;

  --ns-outline:        #79747E;
  --ns-outline-var:    rgba(121, 116, 126, 0.15);

  /* Success stroke/fill on light surfaces (checks, badges) — :root keeps mint for dark UI */
  --ns-success:        #15703c;

  --shadow-1: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-2: 0 6px 16px rgba(0,0,0,0.06);
  --shadow-3: 0 16px 32px rgba(0,0,0,0.08);

  --ns-one-reel-border:      #7B4CD0;
  --ns-one-reel-border-ring: rgba(123, 76, 208, 0.25);
}