/* =====================================================
POPSHOP™ THEME SYSTEM (FINAL)

- 7 COLOR PRO SYSTEM
- 3 COLOR BASIC SYSTEM (AUTO EXPANDS)
- DARK / LIGHT MODE
  ===================================================== */

/* =====================================================

1. DEFAULT (PRO MODE — 7 COLOR SYSTEM)
   These are full semantic roles
   ===================================================== */

:root {

/* =========================
SURFACES
========================= */

--bg-main:#000;
--bg-surface:#111;
--bg-elevated:#1b1b1b;
--bg-subtle:#0e0e0e;

/* =========================
TEXT
========================= */

--text-main:#fff;
--text-secondary:#aaa;
--text-tertiary:#777;
--text-inverse:#000;

/* =========================
7 COLOR SYSTEM (PRO)
========================= */

--primary-rgb: 212,175,55;
--secondary-rgb: 120,120,120;
--accent-rgb: 212,175,55;

--success-rgb: 46,204,113;
--warning-rgb: 255,184,0;
--error-rgb: 255,95,95;

/* Neutral is derived from surface */
--neutral-rgb: 180,180,180;

}

/* =====================================================
2. COLOR ENGINE (AUTO GENERATED)
===================================================== */

:root {

/* PRIMARY */
--primary: rgba(var(--primary-rgb),1);
--primary-soft: rgba(var(--primary-rgb),.25);

/* SECONDARY */
--secondary: rgba(var(--secondary-rgb),1);

/* ACCENT */
--accent: rgba(var(--accent-rgb),1);
--accent-soft: rgba(var(--accent-rgb),.25);
--accent-mid: rgba(var(--accent-rgb),.5);
--accent-strong: rgba(var(--accent-rgb),.8);

/* STATE */
--success: rgba(var(--success-rgb),1);
--warning: rgba(var(--warning-rgb),1);
--error: rgba(var(--error-rgb),1);

/* GLOW */
--accent-glow-soft: rgba(var(--accent-rgb),.25);
--accent-glow-mid: rgba(var(--accent-rgb),.35);
--accent-glow-strong: rgba(var(--accent-rgb),.5);

}

/* =====================================================
3. UI SYSTEM
===================================================== */

:root {

--ui-light-08: rgba(255,255,255,.08);
--ui-light-18: rgba(255,255,255,.18);

--border-subtle: rgba(255,255,255,.08);
--border-medium: rgba(255,255,255,.15);
--border-strong: rgba(255,255,255,.25);

}

/* =====================================================
4. OVERLAY
===================================================== */

:root {

--overlay-soft: rgba(0,0,0,.25);
--overlay-medium: rgba(0,0,0,.5);
--overlay-strong: rgba(0,0,0,.85);

}

/* =====================================================
5. BASIC MODE (3 COLOR → AUTO EXPAND)
USER PICKS:

- base
- surface
- accent
  ===================================================== */

:root[data-theme-mode="basic"] {

/* USER INPUT */
--basic-base:#000;
--basic-surface:#111;
--basic-accent-rgb: 212,175,55;

/* MAP → SYSTEM */

--bg-main: var(--basic-base);
--bg-surface: var(--basic-surface);

--bg-elevated: color-mix(in srgb, var(--basic-surface) 85%, white);
--bg-subtle: color-mix(in srgb, var(--basic-base) 70%, black);

--text-main:#fff;
--text-secondary:#aaa;

/* AUTO EXPAND COLORS */

--primary-rgb: var(--basic-accent-rgb);
--secondary-rgb: 140,140,140;
--accent-rgb: var(--basic-accent-rgb);

--success-rgb: 46,204,113;
--warning-rgb: 255,184,0;
--error-rgb: 255,95,95;

}

/* =====================================================
6. LIGHT MODE (FULL SYSTEM FLIP)
===================================================== */

:root[data-theme="light"] {

--bg-main:#f8fafc;
--bg-surface:#ffffff;
--bg-elevated:#f1f5f9;
--bg-subtle:#e2e8f0;

--text-main:#0f172a;
--text-secondary:#475569;

--ui-light-08: rgba(0,0,0,.04);
--ui-light-18: rgba(0,0,0,.08);

--border-subtle: rgba(0,0,0,.08);
--border-medium: rgba(0,0,0,.15);
--border-strong: rgba(0,0,0,.25);

--overlay-soft: rgba(0,0,0,.08);
--overlay-medium: rgba(0,0,0,.12);
--overlay-strong: rgba(0,0,0,.2);

}

:root {
  --text-primary: var(--text-main);
}

/* =====================================================
7. BASE ELEMENTS
===================================================== */

body {
margin:0;
padding:0;

background:var(--bg-main);
color:var(--text-main);

font-family:Inter,system-ui,sans-serif;
}

* {
  box-sizing:border-box;
  }

button {
font-family:inherit;
}
/* ======================================================
GLOBAL LINK RESET (NO BLUE / NO UNDERLINE)
====================================================== */

a,
a:visited,
a:hover,
a:active {
  color: inherit;
  text-decoration: none;
}

/* Optional: remove tap highlight on mobile */
a {
  -webkit-tap-highlight-color: transparent;
}

/* Optional: prevent blue on autofill / weird states */
a:focus {
  outline: none;
}