/* ============================================================
   theme.css — ChennaiLaptops Color Token System
   ALL color values live here. No hex codes anywhere else.
   Light theme: :root   |   Dark theme: [data-theme="dark"]
   ============================================================ */

:root {
  /* --- Backgrounds --- */
  --bg-primary:        #ffffff;
  --bg-secondary:      #f7f8fc;
  --bg-card:           #ffffff;
  --bg-nav:            #0f0f1a;
  --bg-hero:           linear-gradient(135deg, #0f0f1a 0%, #1a0a2e 45%, #0d1f2d 100%);
  --bg-hero-solid:     #0f0f1a;
  --bg-input:          #f0f2f8;
  --bg-overlay:        rgba(255,255,255,0.85);

  /* --- Text --- */
  --text-primary:      #0f0f1a;
  --text-secondary:    #5a5a7a;
  --text-muted:        #9999bb;
  --text-nav:          #ffffff;
  --text-nav-muted:    #888899;
  --text-on-accent:    #ffffff;

  /* --- Accents --- */
  --accent-teal:       #00C49A;
  --accent-teal-bg:    rgba(0, 196, 154, 0.10);
  --accent-teal-border:rgba(0, 196, 154, 0.28);
  --accent-violet:     #7C3AED;
  --accent-violet-bg:  rgba(124, 58, 237, 0.10);
  --accent-violet-border:rgba(124, 58, 237, 0.28);
  --accent-coral:      #F97316;
  --accent-coral-bg:   rgba(249, 115, 22, 0.10);
  --accent-gradient:   linear-gradient(135deg, #00C49A, #0099CC);
  --accent-gradient-v: linear-gradient(135deg, #7C3AED, #4F46E5);
  --accent-hero-glow:  radial-gradient(circle, rgba(124,58,237,0.28), transparent 70%);
  --accent-hero-glow2: radial-gradient(circle, rgba(0,196,154,0.18), transparent 70%);

  /* --- Semantic --- */
  --color-success:     #00C49A;
  --color-success-bg:  rgba(0, 196, 154, 0.10);
  --color-success-border:rgba(0, 196, 154, 0.28);
  --color-warning:     #F59E0B;
  --color-warning-bg:  rgba(245, 158, 11, 0.10);
  --color-warning-border:rgba(245, 158, 11, 0.25);
  --color-danger:      #EF4444;
  --color-danger-bg:   rgba(239, 68, 68, 0.10);
  --color-danger-border:rgba(239, 68, 68, 0.28);
  --color-info:        #3B82F6;
  --color-info-bg:     rgba(59, 130, 246, 0.10);

  /* --- Borders --- */
  --border-default:    rgba(15, 15, 26, 0.10);
  --border-hover:      rgba(15, 15, 26, 0.22);
  --border-strong:     rgba(15, 15, 26, 0.35);

  /* --- Shadows --- */
  --shadow-card:       0 2px 12px rgba(15, 15, 26, 0.07);
  --shadow-hover:      0 6px 24px rgba(15, 15, 26, 0.13);
  --shadow-nav:        0 1px 0 rgba(255,255,255,0.04);

  /* --- Stars --- */
  --star-filled:       #F59E0B;
  --star-empty:        #d1d1e0;

  /* --- Badge colors (light) --- */
  --badge-brand-bg:    rgba(124, 58, 237, 0.10);
  --badge-brand-text:  #6d28d9;
  --badge-brand-border:rgba(124, 58, 237, 0.25);
  --badge-excellent-bg:#d1fae5;
  --badge-excellent-text:#065f46;
  --badge-excellent-border:rgba(0,196,154,0.3);
  --badge-good-bg:     #fef3c7;
  --badge-good-text:   #92400e;
  --badge-good-border: rgba(245,158,11,0.3);
  --badge-fair-bg:     #fee2e2;
  --badge-fair-text:   #991b1b;
  --badge-fair-border: rgba(239,68,68,0.3);
  --badge-instock-bg:  #d1fae5;
  --badge-instock-text:#065f46;
  --badge-outstock-bg: #fee2e2;
  --badge-outstock-text:#991b1b;
  --badge-lowstock-bg: #fef3c7;
  --badge-lowstock-text:#92400e;

  /* --- Misc --- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;
  --transition:  0.3s ease;
}

/* ============================================================
   DARK THEME OVERRIDES
   ============================================================ */
[data-theme="dark"] {
  --bg-primary:        #0f0f1a;
  --bg-secondary:      #16162a;
  --bg-card:           #1a1a2e;
  --bg-input:          #1e1e32;
  --bg-overlay:        rgba(15,15,26,0.92);

  --text-primary:      #e8e8f4;
  --text-secondary:    #8888aa;
  --text-muted:        #55556a;

  --border-default:    rgba(255,255,255,0.08);
  --border-hover:      rgba(255,255,255,0.16);
  --border-strong:     rgba(255,255,255,0.24);

  --shadow-card:       0 2px 16px rgba(0,0,0,0.35);
  --shadow-hover:      0 6px 30px rgba(0,0,0,0.5);

  --star-empty:        #333355;

  --badge-brand-bg:    rgba(124,58,237,0.18);
  --badge-brand-text:  #c4b5fd;
  --badge-brand-border:rgba(124,58,237,0.35);
  --badge-excellent-bg:rgba(0,196,154,0.14);
  --badge-excellent-text:#34d399;
  --badge-excellent-border:rgba(0,196,154,0.3);
  --badge-good-bg:     rgba(245,158,11,0.14);
  --badge-good-text:   #fbbf24;
  --badge-good-border: rgba(245,158,11,0.3);
  --badge-fair-bg:     rgba(239,68,68,0.14);
  --badge-fair-text:   #f87171;
  --badge-fair-border: rgba(239,68,68,0.3);
  --badge-instock-bg:  rgba(0,196,154,0.14);
  --badge-instock-text:#34d399;
  --badge-outstock-bg: rgba(239,68,68,0.14);
  --badge-outstock-text:#f87171;
  --badge-lowstock-bg: rgba(245,158,11,0.14);
  --badge-lowstock-text:#fbbf24;

  --accent-teal-bg:    rgba(0,196,154,0.12);
  --accent-violet-bg:  rgba(124,58,237,0.15);
  --color-success-bg:  rgba(0,196,154,0.12);
  --color-warning-bg:  rgba(245,158,11,0.12);
  --color-danger-bg:   rgba(239,68,68,0.12);
}

/* Smooth theme transition — applied to html element */
html {
  transition: background-color 0.4s ease, color 0.3s ease;
}