/* css/tokens.css — valores de sistema.md §2 y §4 */
:root {
  color-scheme: light dark;

  --bg:            #F2F2F7;
  --bg-2:          #FFFFFF;
  --bg-3:          #F2F2F7;
  --bg-elevated:   #FFFFFF;

  --label:         #000000;
  --label-2:       #6C6C70;
  --label-3:       #8A8A8E;
  --label-inverse: #FFFFFF;

  --separator:        rgba(60, 60, 67, 0.29);
  --separator-opaque: #C6C6C8;
  --fill-1: rgba(120, 120, 128, 0.20);
  --fill-2: rgba(120, 120, 128, 0.16);
  --fill-3: rgba(118, 118, 128, 0.12);
  --fill-4: rgba(116, 116, 128, 0.08);

  --tint:       #0066CC;
  --tint-fill:  #0066CC;
  --on-tint:    #FFFFFF;
  --tint-soft:  rgba(0, 102, 204, 0.12);

  --green:       #34C759;  --green-text:  #1F7A35;
  --orange:      #FF9500;  --orange-text: #C93400;
  --red:         #FF3B30;  --red-text:    #D70015;
  --green-soft:  rgba(52, 199, 89, 0.16);

  --cat-defensas:     #5856D6;
  --cat-laboratorio:  #AF52DE;
  --cat-ejercito:     #30B0C7;
  --cat-equipamiento: #FF2D55;
  --cat-mascotas:     #00C7BE;
  --cat-heroes:       #32ADE6;
  --cat-trampas:      #A2845E;
  --cat-recursos:     #FFCC00;
  --cat-muros:        #6E7A8A;

  --thumb-bg: #EFEFF4;

  /* Escena y pergamino de la 2.0. --bg-2, --orange, --orange-text y --green no se mueven: los usa el badge overMax. */
  --scene: #2D3E57;
  --on-dark: #FFFFFF;
  --on-dark-2: #D7DCE6;
  --panel-2: #FFFDF5;
  --ink: #24211C;
  --go: #2F7F17; /* blanco encima ≥ 4,5:1, sin contar contorno */
  --gold: #F6C744;

  --material-bar:         rgba(249, 249, 249, 0.80);
  --material-bar-solid:   #F9F9F9;
  --material-float:       rgba(255, 255, 255, 0.86);
  --material-float-solid: #FFFFFF;
  --bar-hairline:         rgba(0, 0, 0, 0.30);
  --seg-thumb:            #FFFFFF;
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-thumb: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  --margin: 16px;
  --margin-l: max(var(--margin), env(safe-area-inset-left));
  --margin-r: max(var(--margin), env(safe-area-inset-right));

  --r-card: 12px;
  --r-btn: 12px;
  --r-sheet: 14px;
  --r-seg: 9px;
  --r-seg-thumb: 7px;
  --r-pill: 999px;

  --row-min: 44px;
  --tabbar-h: 64px;
  --navbar-h: 44px;
}

@media (min-width: 414px) {
  :root { --margin: 20px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #000000;
    --bg-2:          #1C1C1E;
    --bg-3:          #2C2C2E;
    --bg-elevated:   #1C1C1E;

    --label:         #FFFFFF;
    --label-2:       #AEAEB2;
    --label-3:       #8E8E93;
    --label-inverse: #000000;

    --separator:        rgba(84, 84, 88, 0.65);
    --separator-opaque: #38383A;
    --fill-1: rgba(120, 120, 128, 0.36);
    --fill-2: rgba(120, 120, 128, 0.32);
    --fill-3: rgba(118, 118, 128, 0.24);
    --fill-4: rgba(118, 118, 128, 0.18);

    --tint:       #409CFF;
    --tint-fill:  #0A6CD9;
    --on-tint:    #FFFFFF;
    --tint-soft:  rgba(64, 156, 255, 0.18);

    --green:       #30D158;  --green-text:  #30D158;
    --orange:      #FF9F0A;  --orange-text: #FF9F0A;
    --red:         #FF453A;  --red-text:    #FF6961;
    --green-soft:  rgba(48, 209, 88, 0.20);

    --cat-defensas:     #5E5CE6;
    --cat-laboratorio:  #BF5AF2;
    --cat-ejercito:     #40C8E0;
    --cat-equipamiento: #FF375F;
    --cat-mascotas:     #63E6E2;
    --cat-heroes:       #64D2FF;
    --cat-trampas:      #AC8E68;
    --cat-recursos:     #FFD60A;
    --cat-muros:        #8E9AAB;

    --thumb-bg: #2C2C2E;

    --scene: #141B27;
    --on-dark: #FFFFFF;
    --on-dark-2: #D7DCE6;
    --panel-2: #353946;
    --ink: #F3F1EA;
    --go: #2F7F17;
    --gold: #F6C744;

    --material-bar:         rgba(30, 30, 30, 0.80);
    --material-bar-solid:   #1E1E1E;
    --material-float:       rgba(44, 44, 46, 0.86);
    --material-float-solid: #2C2C2E;
    --bar-hairline:         rgba(255, 255, 255, 0.15);
    --seg-thumb:            #636366;
    --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-thumb: 0 3px 8px rgba(0, 0, 0, 0.4);
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #F2F2F7; --bg-2: #FFFFFF; --bg-3: #F2F2F7; --bg-elevated: #FFFFFF;
  --label: #000000; --label-2: #6C6C70; --label-3: #8A8A8E; --label-inverse: #FFFFFF;
  --separator: rgba(60, 60, 67, 0.29); --separator-opaque: #C6C6C8;
  --fill-1: rgba(120, 120, 128, 0.20); --fill-2: rgba(120, 120, 128, 0.16);
  --fill-3: rgba(118, 118, 128, 0.12); --fill-4: rgba(116, 116, 128, 0.08);
  --tint: #0066CC; --tint-fill: #0066CC; --on-tint: #FFFFFF; --tint-soft: rgba(0, 102, 204, 0.12);
  --green: #34C759; --green-text: #1F7A35; --orange: #FF9500; --orange-text: #C93400;
  --red: #FF3B30; --red-text: #D70015; --green-soft: rgba(52, 199, 89, 0.16);
  --thumb-bg: #EFEFF4; --scene: #2D3E57; --panel-2: #FFFDF5; --ink: #24211C;
  --material-bar: rgba(249, 249, 249, 0.80); --material-bar-solid: #F9F9F9;
  --material-float: rgba(255, 255, 255, 0.86); --material-float-solid: #FFFFFF;
  --bar-hairline: rgba(0, 0, 0, 0.30); --seg-thumb: #FFFFFF;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000; --bg-2: #1C1C1E; --bg-3: #2C2C2E; --bg-elevated: #1C1C1E;
  --label: #FFFFFF; --label-2: #AEAEB2; --label-3: #8E8E93; --label-inverse: #000000;
  --separator: rgba(84, 84, 88, 0.65); --separator-opaque: #38383A;
  --fill-1: rgba(120, 120, 128, 0.36); --fill-2: rgba(120, 120, 128, 0.32);
  --fill-3: rgba(118, 118, 128, 0.24); --fill-4: rgba(118, 118, 128, 0.18);
  --tint: #409CFF; --tint-fill: #0A6CD9; --on-tint: #FFFFFF; --tint-soft: rgba(64, 156, 255, 0.18);
  --green: #30D158; --green-text: #30D158; --orange: #FF9F0A; --orange-text: #FF9F0A;
  --red: #FF453A; --red-text: #FF6961; --green-soft: rgba(48, 209, 88, 0.20);
  --thumb-bg: #2C2C2E; --scene: #141B27; --panel-2: #353946; --ink: #F3F1EA;
  --material-bar: rgba(30, 30, 30, 0.80); --material-bar-solid: #1E1E1E;
  --material-float: rgba(44, 44, 46, 0.86); --material-float-solid: #2C2C2E;
  --bar-hairline: rgba(255, 255, 255, 0.15); --seg-thumb: #636366;
}

.cat-defensas     { --cat: var(--cat-defensas); }
.cat-laboratorio  { --cat: var(--cat-laboratorio); }
.cat-ejercito     { --cat: var(--cat-ejercito); }
.cat-equipamiento { --cat: var(--cat-equipamiento); }
.cat-mascotas     { --cat: var(--cat-mascotas); }
.cat-heroes       { --cat: var(--cat-heroes); }
.cat-trampas      { --cat: var(--cat-trampas); }
.cat-recursos     { --cat: var(--cat-recursos); }
.cat-muros        { --cat: var(--cat-muros); }