/* Paletas compartidas por la interfaz y las muestras del selector. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-latin.756049f32875.woff2") format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.260c81a4759b.woff2") format('woff2');
}

:root, [data-court-preview='green'] {
  --court-dark: #164b35;
  --court-bright: #d7f75b;
  --court-pastel: #eef2e8;
}

:root[data-court-theme='blue-indigo'], [data-court-preview='blue-indigo'] {
  --court-dark: #293579;
  --court-bright: #c1cbff;
  --court-pastel: #eef0fb;
}

:root[data-court-theme='blue-melbourne'], [data-court-preview='blue-melbourne'] {
  --court-dark: #164477;
  --court-bright: #b1dfff;
  --court-pastel: #e7f3fc;
}

:root[data-court-theme='blue-miami'], [data-court-preview='blue-miami'] {
  --court-dark: #084b5e;
  --court-bright: #a0e6ef;
  --court-pastel: #e2f6f9;
}

:root[data-court-theme='clay-paris'], [data-court-preview='clay-paris'] {
  --court-dark: #70291e;
  --court-bright: #ffc0a3;
  --court-pastel: #fae9e0;
}

:root[data-court-theme='clay-madrid'], [data-court-preview='clay-madrid'] {
  --court-dark: #603509;
  --court-bright: #ffd087;
  --court-pastel: #fff2db;
}

:root:is([data-court-theme='clay-brick'], [data-court-theme='dark-clay']),
[data-court-preview='clay-brick'], [data-court-preview='dark-clay'] {
  --court-dark: #552126;
  --court-bright: #f5aaa0;
  --court-pastel: #f7e7e5;
}

@media screen {
  :root[data-court-theme='dark-green'], [data-court-preview='dark-green'] {
    --court-dark: #1c4533;
    --court-bright: #9fdab7;
    --court-pastel: #c8e3d4;
  }

  :root[data-court-theme='dark-blue'], [data-court-preview='dark-blue'] {
    --court-dark: #203c65;
    --court-bright: #a8ceff;
    --court-pastel: #cadcf4;
  }
}

/* Tintas de lectura y fondos claros derivados de cada paleta. */
:root {
  --court-white: #fff;
  --color-primary: color-mix(in srgb, var(--court-dark) 52%, #151719);
  --color-primary-hover: color-mix(in srgb, var(--color-primary) 82%, black);
  --color-primary-surface: var(--court-dark);
  --color-primary-surface-hover: #103d2a;
  --color-primary-surface-raised: #2c5947;
  --color-on-primary: var(--court-white);
  --color-on-primary-accent: color-mix(in srgb, var(--color-accent) 45%, var(--color-on-primary));
  --color-accent: var(--court-bright);
  --color-accent-hover: #e1fa82;
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 11%, #fafafa);
  --color-on-accent: var(--color-primary);
  --color-bg: color-mix(in srgb, var(--court-pastel) 12%, #fafafa);
  --color-surface: var(--court-white);
  --color-surface-tint: color-mix(in srgb, var(--court-pastel) 14%, #f8f9fa);
  --color-soft: color-mix(in srgb, var(--court-pastel) 24%, #f6f7f8);
  --color-text: color-mix(in srgb, var(--court-dark) 36%, #17191b);
  --color-muted: color-mix(in srgb, var(--color-text) 77%, var(--court-white));
  --color-on-primary-muted: #d5e4d7;
  --color-border: #dce3d9;
  --color-border-strong: #c9d8c7;
  --color-tab-selected: color-mix(in srgb, var(--court-dark) 8%, var(--color-surface));
  --color-border-accent: #aec5b4;
  --color-feature: #1f694a;
  --color-overlay: #10281eb3;
  --font-heading: 'Manrope', Arial, sans-serif;
  --font-body: 'Inter', Arial, sans-serif;
  --radius-card: 12px;
  --radius-button: 7px;
  color-scheme: light;
}

/* En las otras canchas, los tonos auxiliares se derivan de la misma paleta. */
:root:is([data-court-theme^='blue-'], [data-court-theme^='clay-']) {
  --color-primary-surface-hover: color-mix(in srgb, var(--court-dark) 82%, black);
  --color-primary-surface-raised: color-mix(in srgb, var(--court-dark) 90%, var(--color-surface));
  --color-accent-hover: color-mix(in srgb, var(--color-accent) 75%, var(--color-surface));
  --color-on-primary-muted: color-mix(in srgb, var(--color-surface) 85%, var(--court-dark));
  --color-border: color-mix(in srgb, var(--court-pastel) 91%, var(--court-dark));
  --color-border-strong: color-mix(in srgb, var(--court-pastel) 82%, var(--court-dark));
  --color-border-accent: color-mix(in srgb, var(--court-pastel) 71%, var(--court-dark));
  --color-feature: color-mix(in srgb, var(--court-dark) 85%, var(--color-accent));
  --color-overlay: color-mix(in srgb, var(--color-primary-surface-hover) 70%, transparent);
}

@media screen {
  :root[data-court-theme^='dark-'] {
    --color-primary: color-mix(in srgb, var(--court-bright) 36%, #f5f6f8);
    --color-primary-hover: color-mix(in srgb, var(--color-primary) 70%, var(--court-white));
    --color-primary-surface: var(--court-dark);
    --color-primary-surface-hover: color-mix(in srgb, var(--color-primary-surface) 93%, var(--court-white));
    --color-primary-surface-raised: color-mix(in srgb, var(--color-primary-surface) 90%, var(--court-white));
    --color-on-primary-muted: color-mix(in srgb, var(--court-white) 80%, var(--court-dark));
    --color-accent-hover: color-mix(in srgb, var(--color-accent) 75%, var(--court-white));
    --color-accent-soft: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
    --color-on-accent: var(--color-bg);
    --color-bg: color-mix(in srgb, var(--court-dark) 5%, #0b0d0f);
    --color-surface: color-mix(in srgb, var(--court-dark) 9%, #101214);
    --color-surface-tint: color-mix(in srgb, var(--court-dark) 12%, #151719);
    --color-soft: color-mix(in srgb, var(--court-dark) 15%, #181a1c);
    --color-text: color-mix(in srgb, var(--court-pastel) 22%, #f4f5f6);
    --color-muted: color-mix(in srgb, var(--court-pastel) 24%, #b6bac0);
    --color-border: color-mix(in srgb, var(--court-pastel) 24%, var(--color-surface));
    --color-border-strong: color-mix(in srgb, var(--court-pastel) 43%, var(--color-surface));
    --color-border-accent: color-mix(in srgb, var(--court-bright) 58%, var(--color-surface));
    --color-tab-selected: var(--color-accent-soft);
    --color-feature: var(--court-bright);
    --color-overlay: #080b0dbb;
    --color-success-text: #b6e4c5;
    --color-success-bg: #233c31;
    --color-success-border: #6f9d83;
    --color-info-text: #b8d6ff;
    --color-info-bg: #253b56;
    --color-info-border: #7795bd;
    --color-warning-text: #ffdc9a;
    --color-warning-bg: #47351f;
    --color-warning-border: #ad8c60;
    --color-danger-text: #ffb9ae;
    --color-danger-bg: #4e2b2b;
    --color-danger-border: #bc7c78;
    --color-danger: var(--color-danger-text);
    --color-called-text: #e4c7ff;
    --color-called-bg: #403051;
    --color-called-border: #a081b7;
    color-scheme: dark;
  }

  :root[data-court-theme='dark-clay'] {
    --color-primary: #fbefed;
    --color-text: #faf3f2;
    --color-muted: #ccc3c2;
    --color-on-primary: #fff6f4;
    --color-on-primary-muted: #ede4e3;
    --color-on-primary-accent: var(--color-primary);
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--color-primary);
  font: 700 25px/1 var(--font-heading);
  letter-spacing: -1.1px;
  white-space: nowrap;
}

.brand svg { width: 31px; height: 31px; flex-shrink: 0; }
.brand-link { display: inline-flex; text-decoration: none; }
.icon { width: 20px; height: 20px; flex-shrink: 0; }