/* Kuwal Store design tokens (P0b). Three section themes, one generic token vocabulary.
   Components read ONLY --ks-* tokens, so anything placed inside [data-theme] adopts it.

   Contrast (WCAG 2.x, computed; text tokens >= 4.5:1):
   STORE     text/bg 12.75 | muted/bg 6.30 | muted/surface-2 5.96 | on-primary/primary 4.85 (hover 6.15)
             primary/bg 4.61 | primary-ink/primary-tint 5.51 | success/white 5.25 | danger/white 6.54 | warning/tint 6.57
   SOFTWARE  text/bg 17.85 | muted/surface-2 7.06 | white/primary 6.70 | primary-ink/tint 9.40
             accent/white 5.47 | success/white 5.02 | danger/white 6.47 | warning/tint 6.84
   GAMES     text/bg 17.35 | muted/surface-2 7.23 | primary(text)/bg 6.96 | primary-ink/tint 8.84
             white/primary #7C3AED 5.70 (hover #6D28D9 7.1) | border-strong on surface 3.5 | dark #0B1020 on amber 8.82 | success 8.94 | danger 6.22 | warning 10.30
   Games --ks-primary is #7C3AED (white text 5.7:1); use --ks-primary-ink (#C4B5FD) for violet text on dark. */

:root,
[data-theme="store"] {
  color-scheme: light;
  --ks-bg: #FFF8F1;
  --ks-surface: #FFFFFF;
  --ks-surface-2: #FFF0E6;
  --ks-text: #3B2A33;
  --ks-muted: #6B5762;
  --ks-border: #F0DDD3;
  --ks-border-strong: #E4C9BB;
  --ks-primary: #C93C68;
  --ks-primary-hover: #B0305A;
  --ks-primary-tint: #FFE4EC;
  --ks-primary-ink: #A82E55;
  --ks-on-primary: #FFFFFF;
  --ks-accent: #7CCBA6;
  --ks-accent-tint: #DDF3E8;
  --ks-success: #1E7B4F;
  --ks-success-tint: #DDF3E8;
  --ks-warning: #7A4B00;
  --ks-warning-tint: #FFF1C2;
  --ks-danger: #B3261E;
  --ks-danger-tint: #FDE3E1;
  --ks-star: #F6B93B;
  --ks-font-display: 'Baloo 2', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ks-font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ks-r-sm: 10px; --ks-r-md: 16px; --ks-r-lg: 24px; --ks-r-xl: 32px; --ks-r-pill: 999px;
  --ks-sh-1: 0 2px 8px rgba(120, 60, 50, .08);
  --ks-sh-2: 0 8px 24px rgba(120, 60, 50, .12);
  --ks-sh-3: 0 16px 40px rgba(120, 60, 50, .16);
  --ks-focus: #A82E55;
  /* theme-specific component hooks */
  --ks-r-btn: 999px;
  --ks-r-input: 16px;
  --ks-btn-bg: #C93C68;
  --ks-btn-bg-hover: #B0305A;
  --ks-btn-shadow: 0 4px 0 #9C2A50;
  --ks-btn-shadow-hover: 0 5px 0 #9C2A50, 0 10px 18px rgba(201, 60, 104, .25);
  --ks-btn-shadow-active: 0 0 0 #9C2A50;
  --ks-btn-press: 3px;
  --ks-h-weight: 600;
  --ks-h-track: -.01em;
  --ks-eyebrow-track: .02em;
  --ks-glass: rgba(255, 255, 255, .72);
  --ks-wash: radial-gradient(120% 80% at 50% 0%, #FFE4EC 0%, #FFF8F1 60%);
  --ks-card-border: 1px solid var(--ks-border);
  --ks-focus-ring: 0 0 0 3px #fff, 0 0 0 5px var(--ks-focus);
}

[data-theme="software"] {
  color-scheme: light;
  --ks-bg: #FFFFFF;
  --ks-surface: #FFFFFF;
  --ks-surface-2: #F5F7FA;
  --ks-text: #0F172A;
  --ks-muted: #475569;
  --ks-border: #E2E8F0;
  --ks-border-strong: #CBD5E1;
  --ks-primary: #1D4ED8;
  --ks-primary-hover: #1E40AF;
  --ks-primary-tint: #EFF4FF;
  --ks-primary-ink: #1E3A8A;
  --ks-on-primary: #FFFFFF;
  --ks-accent: #0F766E;
  --ks-accent-tint: #E6F4F1;
  --ks-success: #15803D;
  --ks-success-tint: #E7F6EC;
  --ks-warning: #92400E;
  --ks-warning-tint: #FFFBEB;
  --ks-danger: #B91C1C;
  --ks-danger-tint: #FEECEC;
  --ks-star: #D97706;
  --ks-font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ks-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ks-r-sm: 6px; --ks-r-md: 10px; --ks-r-lg: 14px; --ks-r-xl: 20px; --ks-r-pill: 999px;
  --ks-sh-1: 0 1px 2px rgba(15, 23, 42, .06);
  --ks-sh-2: 0 8px 24px rgba(15, 23, 42, .08);
  --ks-sh-3: 0 24px 48px rgba(15, 23, 42, .12);
  --ks-focus: #1D4ED8;
  --ks-r-btn: 10px;
  --ks-r-input: 8px;
  --ks-btn-bg: #1D4ED8;
  --ks-btn-bg-hover: #1E40AF;
  --ks-btn-shadow: 0 1px 2px rgba(15, 23, 42, .18);
  --ks-btn-shadow-hover: 0 4px 12px rgba(29, 78, 216, .28);
  --ks-btn-shadow-active: 0 0 0 transparent;
  --ks-btn-press: 1px;
  --ks-h-weight: 700;
  --ks-h-track: -.02em;
  --ks-eyebrow-track: .04em;
  --ks-glass: rgba(255, 255, 255, .8);
  --ks-wash: linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%);
  --ks-card-border: 1px solid var(--ks-border);
  --ks-focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--ks-focus);
}

[data-theme="games"] {
  color-scheme: dark;
  --ks-bg: #0B1020;
  --ks-surface: #121A33;
  --ks-surface-2: #1A2446;
  --ks-text: #F1F5FF;
  --ks-muted: #A8B3CF;
  --ks-border: rgba(255, 255, 255, .08);
  --ks-border-strong: rgba(255, 255, 255, .38); /* >=3:1 on surface (3.5) */
  --ks-primary: #7C3AED;
  --ks-primary-hover: #6D28D9;
  --ks-primary-tint: rgba(139, 92, 246, .16);
  --ks-primary-ink: #C4B5FD;
  --ks-on-primary: #FFFFFF;
  --ks-accent: #14B8A6;
  --ks-accent-tint: rgba(20, 184, 166, .16);
  --ks-success: #34D399;
  --ks-success-tint: rgba(52, 211, 153, .14);
  --ks-warning: #FBBF24;
  --ks-warning-tint: rgba(251, 191, 36, .14);
  --ks-danger: #F87171;
  --ks-danger-tint: rgba(248, 113, 113, .14);
  --ks-star: #FBBF24;
  --ks-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ks-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ks-r-sm: 10px; --ks-r-md: 14px; --ks-r-lg: 22px; --ks-r-xl: 30px; --ks-r-pill: 999px;
  --ks-sh-1: 0 2px 8px rgba(0, 0, 0, .35);
  --ks-sh-2: 0 10px 30px rgba(0, 0, 0, .45);
  --ks-sh-3: 0 20px 60px rgba(0, 0, 0, .55);
  --ks-focus: #C4B5FD;
  --ks-r-btn: 999px;
  --ks-r-input: 14px;
  --ks-btn-bg: linear-gradient(90deg, #6D28D9, #7C3AED 55%, #8046F0);
  --ks-btn-bg-hover: linear-gradient(90deg, #5B21B6, #6D28D9 55%, #7C3AED);
  --ks-btn-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 6px 22px rgba(139, 92, 246, .38);
  --ks-btn-shadow-hover: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 8px 32px rgba(139, 92, 246, .6);
  --ks-btn-shadow-active: 0 2px 10px rgba(139, 92, 246, .4);
  --ks-btn-press: 1px;
  --ks-h-weight: 800;
  --ks-h-track: -.02em;
  --ks-eyebrow-track: .12em;
  --ks-glass: rgba(18, 26, 51, .72);
  --ks-wash: radial-gradient(90% 70% at 15% 0%, rgba(139, 92, 246, .28) 0%, transparent 60%), radial-gradient(70% 60% at 90% 10%, rgba(20, 184, 166, .16) 0%, transparent 60%), #0B1020;
  --ks-card-border: 1px solid var(--ks-border);
  --ks-focus-ring: 0 0 0 2px #0B1020, 0 0 0 4px var(--ks-focus);
  --ks-brand-gradient: linear-gradient(90deg, #3b82f6, #8b5cf6, #14b8a6, #f59e0b, #f4726a);
  --g-accent: #8B5CF6; --g-accent2: #14B8A6; --g-rgb: 139, 92, 246;
}

:root {
  --ks-brand-gradient: linear-gradient(90deg, #3b82f6, #8b5cf6, #14b8a6, #f59e0b, #f4726a);
  /* spacing (4px base) */
  --ks-s-1: 4px; --ks-s-2: 8px; --ks-s-3: 12px; --ks-s-4: 16px; --ks-s-5: 24px;
  --ks-s-6: 32px; --ks-s-7: 48px; --ks-s-8: 64px; --ks-s-9: 96px;
  --ks-container: 1200px;
  --ks-gutter: 16px;
  --ks-header-h: 52px;
  /* motion */
  --ks-ease: cubic-bezier(.25, .1, .25, 1);
  --ks-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ks-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --ks-dur-1: 160ms; --ks-dur-2: 260ms; --ks-dur-3: 520ms; --ks-dur-reveal: 620ms;
}
@media (min-width: 768px) { :root { --ks-gutter: 24px; --ks-header-h: 56px; } }
/* phones: shorter, quicker reveals (mobile_spec §2) */
@media (max-width: 767px) { :root { --ks-dur-reveal: 480ms; --ks-rv-y: 16px; --ks-rv-x: 24px; } }
:root { --ks-rv-y: 24px; --ks-rv-x: 40px; }