/* =========================================================
   Copper Orange Theme
   Primary Color: #f05523
   ========================================================= */

:root,
:root[data-theme="light"],
body.theme-light,
body[data-theme="light"] {
  /* Brand / Accent */
  --primary-color: #f05523;
  --primary-2: #d9481c;
  --primary-soft: rgba(240,85,35,.16);

  /* Buttons */
  --btn-bg: #f05523;
  --btn-text: #ffffff;
  --btn-bg-hover: #d9481c;

  /* Surfaces */
  --bg-color: #ffffff;
  --surface-1: #fff6f2;
  --surface-2: #ffe9df;

  /* Text */
  --text-color: #111827;
  --text-muted: rgba(17,24,39,.66);

  /* Borders / shadows */
  --border-color: rgba(17,24,39,.12);
  --box-shadow: 0 18px 45px rgba(17,24,39,.14);

  /* Links */
  --link-color: var(--primary-color);
  --link-hover: #d9481c;

  /* Focus ring */
  --focus-ring: 0 0 0 4px rgba(240,85,35,.22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary-color: #ff7a4d;
    --primary-2: #f05523;
    --primary-soft: rgba(255,122,77,.18);

    --btn-bg: #ff7a4d;
    --btn-text: #0b0f17;
    --btn-bg-hover: #f05523;

    --bg-color: #070a10;
    --surface-1: rgba(255,255,255,.04);
    --surface-2: rgba(255,255,255,.07);

    --text-color: #fff2ec;
    --text-muted: rgba(255,242,236,.72);

    --border-color: rgba(255,122,77,.18);
    --box-shadow: 0 28px 90px rgba(0,0,0,.42);

    --link-color: var(--primary-color);
    --link-hover: #f05523;

    --focus-ring: 0 0 0 4px rgba(255,122,77,.18);
  }
}

:root[data-theme="dark"],
body.theme-dark,
body[data-theme="dark"],
html.dark body {
  /* Force dark */
  --primary-color: #ff7a4d;
  --primary-2: #f05523;
  --primary-soft: rgba(255,122,77,.18);

  --btn-bg: #ff7a4d;
  --btn-text: #0b0f17;
  --btn-bg-hover: #f05523;

  --bg-color: #070a10;
  --surface-1: rgba(255,255,255,.04);
  --surface-2: rgba(255,255,255,.07);

  --text-color: #fff2ec;
  --text-muted: rgba(255,242,236,.72);

  --border-color: rgba(255,122,77,.18);
  --box-shadow: 0 28px 90px rgba(0,0,0,.42);

  --link-color: var(--primary-color);
  --link-hover: #f05523;

  --focus-ring: 0 0 0 4px rgba(255,122,77,.18);
}

/* Optional helpers */
a { color: var(--link-color); }
a:hover { color: var(--link-hover); }

.theme-btn,
.btn,
button.btn {
  background: var(--btn-bg);
  color: var(--btn-text);
}

.theme-btn:hover,
.btn:hover,
button.btn:hover {
  background: var(--btn-bg-hover);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}