/* ================================================================
   MyClubVault design tokens — "Vault"
   Dark is the base; light overrides live under [data-theme="light"].
   Components in app.css consume these tokens only.
   ================================================================ */

:root {
  /* Typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-2xs: 0.6875rem;  /* 11 */
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.8125rem;   /* 13 */
  --fs-md: 0.875rem;    /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.25rem;     /* 20 */
  --fs-2xl: 1.5rem;     /* 24 */
  --fs-3xl: 1.875rem;   /* 30 */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-tight: -0.015em;
  --tracking-caps: 0.08em;

  /* Spacing (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Sizing */
  --control-h: 44px;
  --control-h-sm: 36px;
  --input-h: 44px;
  --nav: 64px;
  --topbar-h: 56px;
  --sidebar-w: 264px;
  --content-max: 640px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  /* ---- Dark theme (default) ---- */
  color-scheme: dark;
  --bg-app: #0b0b0c;
  --bg-glow: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(220, 200, 141, 0.06), transparent 60%);
  --surface: #141416;
  --surface-2: #1b1b1e;
  --surface-3: #232327;
  --surface-sunken: #0f0f11;
  --surface-glass: rgba(14, 14, 16, 0.82);
  --field-bg: #0f0f11;
  --media-bg: #050506;
  --overlay: rgba(0, 0, 0, 0.66);
  /* Text/icons on top of photos & dark scrims — constant across themes */
  --on-media: #ffffff;
  --on-media-muted: rgba(255, 255, 255, 0.78);
  --on-media-accent: #e8d9a8;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-accent: rgba(220, 200, 141, 0.32);

  --fg: #f4f4f5;
  --fg-2: #c9c9ce;
  --fg-muted: #9b9ba3;
  --fg-subtle: #6c6c74;

  --accent: #dcc88d;
  --accent-hover: #e8d9a8;
  --accent-strong: #b8955a;
  --accent-soft: rgba(220, 200, 141, 0.10);
  --accent-rgb: 220, 200, 141;
  --on-accent: #17140d;
  --ink-rgb: 255, 255, 255;
  --focus-ring: 0 0 0 3px rgba(220, 200, 141, 0.28);

  --success: #4ade80;
  --success-bg: rgba(34, 197, 94, 0.12);
  --success-border: rgba(34, 197, 94, 0.28);
  --warning: #fcd34d;
  --warning-bg: rgba(245, 158, 11, 0.12);
  --warning-border: rgba(245, 158, 11, 0.3);
  --danger: #f87171;
  --danger-fg: #fca5a5;
  --danger-bg: rgba(239, 68, 68, 0.12);
  --danger-border: rgba(239, 68, 68, 0.3);
  --info: #93c5fd;
  --info-bg: rgba(56, 189, 248, 0.10);
  --info-border: rgba(56, 189, 248, 0.24);
  --heart: #fb7185;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.3);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ---- Legacy aliases (existing selectors keep working) ---- */
  --gold: var(--accent);
  --gold-light: var(--accent-hover);
  --bronze: var(--accent-strong);
  --bronze-dark: var(--accent-strong);
  --bg: var(--bg-app);
  --bg-surface: var(--surface-sunken);
  --card: var(--surface);
  --card-hover: var(--surface-2);
  --panel: var(--surface);
  --edge: var(--border);
  --edge-gold: var(--border-strong);
  --line: var(--border);
  --line-gold: var(--border-accent);
  --text: var(--fg);
  --text-soft: var(--fg-2);
  --text-2: var(--fg-2);
  --muted: var(--fg-muted);
  --placeholder: var(--fg-subtle);
  --red: var(--danger);
  --green: var(--success);
  --shadow: var(--shadow-sm);
  --shadow-soft: var(--shadow-sm);
  --shadow-gold: 0 0 0 1px rgba(var(--accent-rgb), 0.16);
}

html[data-theme="light"]:not([data-admin="1"]) {
  color-scheme: light;
  --bg-app: #f6f5f2;
  --bg-glow: none;
  --surface: #ffffff;
  --surface-2: #f4f3ef;
  --surface-3: #ebe9e3;
  --surface-sunken: #f8f7f4;
  --surface-glass: rgba(255, 255, 255, 0.86);
  --field-bg: #ffffff;
  --media-bg: #ecebe7;
  --overlay: rgba(20, 18, 14, 0.42);

  --border: #e6e3dc;
  --border-strong: #d6d2c8;
  --border-accent: rgba(143, 107, 46, 0.4);

  --fg: #1b1a18;
  --fg-2: #44403c;
  --fg-muted: #6f6a64;
  --fg-subtle: #a19c95;

  --accent: #8f6b2e;
  --accent-hover: #7a5a24;
  --accent-strong: #6f5223;
  --accent-soft: rgba(143, 107, 46, 0.09);
  --accent-rgb: 143, 107, 46;
  --on-accent: #ffffff;
  --ink-rgb: 27, 26, 24;
  --focus-ring: 0 0 0 3px rgba(143, 107, 46, 0.22);

  --success: #15803d;
  --success-bg: #effaf3;
  --success-border: #bfe8cd;
  --warning: #a16207;
  --warning-bg: #fefaeb;
  --warning-border: #f6e2a4;
  --danger: #d92d20;
  --danger-fg: #b42318;
  --danger-bg: #fef3f2;
  --danger-border: #fbd1cc;
  --info: #1d4ed8;
  --info-bg: #eff6ff;
  --info-border: #c7dbfe;
  --heart: #e11d48;

  --shadow-xs: 0 1px 2px rgba(16, 18, 24, 0.05);
  --shadow-sm: 0 1px 2px rgba(16, 18, 24, 0.05), 0 1px 3px rgba(16, 18, 24, 0.04);
  --shadow-md: 0 6px 16px rgba(16, 18, 24, 0.08), 0 2px 4px rgba(16, 18, 24, 0.04);
  --shadow-lg: 0 24px 56px rgba(16, 18, 24, 0.16), 0 4px 12px rgba(16, 18, 24, 0.06);
  --highlight: none;
}