/* ============================================================
   PlayHive tokens.css — colors, radius, shadows (light + dark)
   ============================================================ */

/* ---- Self-hosted fonts ---- */
@font-face {
  font-family: 'Lilita One';
  src: url('../assets/fonts/LilitaOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/Nunito-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/Nunito-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Light theme (default) ---- */
:root {
  --font-head: 'Lilita One', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --hex-size-w: 52px;
  --hex-size-h: 58px;
  --hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

  /* surfaces */
  --bg: #dfeafb;
  --bg-2: #cddff7;
  --panel: #ffffff;
  --panel-2: #f1f6ff;
  --line: #c6d9f2;
  --text: #12254a;
  --muted: #4d6488;

  /* brand */
  --orange: #ff8a1f;
  --orange-dark: #c25e00;
  --green: #35c464;
  --green-dark: #1a7d39;
  --blue: #2563d9;
  --blue-dark: #14409a;
  --red: #e5484d;
  --red-dark: #a32b30;
  --gold: #ffc53d;
  --gold-dark: #b8860b;

  /* button label colors (>= 4.5:1) */
  --on-orange: #42200a;
  --on-green: #0c3b1d;
  --on-blue: #ffffff;
  --on-red: #ffffff;

  /* shape edges (chunky 3D look) */
  --edge-orange: var(--orange-dark);
  --edge-green: var(--green-dark);
  --edge-blue: var(--blue-dark);
  --edge-red: var(--red-dark);
  --edge-panel: #c9d6e8;
  --edge-hard: #0d2246;

  --hex-outline: var(--blue);
  --focus: #ff8a1f;

  --shadow-card: 0 10px 24px rgba(18, 37, 74, 0.14);
  --shadow-pop: 0 18px 40px rgba(18, 37, 74, 0.25);

  --topbar-h: 66px;
  --sidebar-w: 96px;

  color-scheme: light;
}

/* ---- Dark theme: system preference, unless user forced light ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #091531;
    --bg-2: #0c1b3c;
    --panel: #17254c;
    --panel-2: #1d2e5c;
    --line: #2c3f75;
    --text: #eef4ff;
    --muted: #a9bde3;

    --orange: #ff9433;
    --orange-dark: #b05400;
    --green: #3ccb6b;
    --green-dark: #197037;
    --blue: #2f6ae6;
    --blue-dark: #1a3f96;
    --red: #ef5b60;
    --red-dark: #94272c;
    --gold: #ffd05a;
    --gold-dark: #9a7208;

    --on-orange: #381904;
    --on-green: #07300f;
    --on-blue: #ffffff;
    --on-red: #ffffff;

    --edge-panel: #0d1834;
    --edge-hard: #040b1c;
    --hex-outline: #6f9bff;

    --shadow-card: 0 10px 24px rgba(0, 0, 0, 0.45);
    --shadow-pop: 0 18px 40px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
  }
}

/* ---- Dark theme: explicit choice ---- */
:root[data-theme='dark'] {
  --bg: #091531;
  --bg-2: #0c1b3c;
  --panel: #17254c;
  --panel-2: #1d2e5c;
  --line: #2c3f75;
  --text: #eef4ff;
  --muted: #a9bde3;

  --orange: #ff9433;
  --orange-dark: #b05400;
  --green: #3ccb6b;
  --green-dark: #197037;
  --blue: #2f6ae6;
  --blue-dark: #1a3f96;
  --red: #ef5b60;
  --red-dark: #94272c;
  --gold: #ffd05a;
  --gold-dark: #9a7208;

  --on-orange: #381904;
  --on-green: #07300f;
  --on-blue: #ffffff;
  --on-red: #ffffff;

  --edge-panel: #0d1834;
  --edge-hard: #040b1c;
  --hex-outline: #6f9bff;

  --shadow-card: 0 10px 24px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 18px 40px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}