/* ============================================================================
   Three selectable app-wide themes (profile page): Geek/Terminal (default),
   Mario, Anthropic. Selected via <html data-app-theme="geek|mario|anthropic">,
   set server-side in partials/head.php from the logged-in user's users.theme
   column (falls back to 'geek' — the bare :root block below — for anonymous
   pre-login pages, which have no user record to read a preference from).

   Spacing/type-scale/font-size tokens are shared across all three themes (only
   color, font-family, radius, and shadow are re-themed) so layout stays
   consistent regardless of which theme is active.
   ============================================================================ */

:root {
  /* Spacing (4px base) — shared by every theme */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Type scale — shared by every theme */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
}

/* ===== Geek / Terminal theme — the default (no data-app-theme attribute) ===== */
:root {
  --color-bg: #000000;
  --color-surface: #0a0f0a;
  --color-surface-alt: #0d150d;
  --color-text: #33ff66;
  --color-text-muted: #1f9e42;
  --color-border: #1a3d1a;
  --color-accent: #00ff41;
  --color-accent-hover: #66ff8f;
  --color-accent-soft: #0d2b0d;
  --color-success: #33ff66;
  --color-success-soft: #0d2b0d;
  --color-warning: #ffcc00;
  --color-warning-soft: #332a00;
  --color-danger: #ff4444;
  --color-danger-soft: #330a0a;
  --color-info: #33ccff;
  --color-info-soft: #002633;

  --font-display: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --font-body: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --shadow-card: 0 0 0 1px rgba(51, 255, 102, 0.18);
  --shadow-pop: 0 0 32px rgba(51, 255, 102, 0.3);
}

/* ===== Mario theme ===== */
[data-app-theme="mario"] {
  --color-bg: #5C94FC;
  --color-surface: #FFFFFF;
  --color-surface-alt: #FFF6D9;
  --color-text: #1A1A2E;
  --color-text-muted: #4A4A6A;
  --color-border: #1A1A2E;
  --color-accent: #E52521;
  --color-accent-hover: #C21E1A;
  --color-accent-soft: #FFD3D1;
  --color-success: #43B047;
  --color-success-soft: #DFF5E0;
  --color-warning: #FBD000;
  --color-warning-soft: #FFF3B0;
  --color-danger: #E52521;
  --color-danger-soft: #FFD3D1;
  --color-info: #00A2E8;
  --color-info-soft: #D6F1FF;

  --font-display: 'Trebuchet MS', Verdana, sans-serif;
  --font-body: 'Trebuchet MS', Verdana, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  /* Chunky offset "block" shadow, no blur — retro game-UI look instead of a soft drop shadow. */
  --shadow-card: 0 3px 0 #1A1A2E;
  --shadow-pop: 0 6px 0 #1A1A2E;
}

/* ===== Anthropic theme (the original default, still selectable) ===== */
[data-app-theme="anthropic"] {
  --color-bg: #F5F0E8;
  --color-surface: #FFFFFF;
  --color-surface-alt: #FAF6EE;
  --color-text: #2B2724;
  --color-text-muted: #6B635A;
  --color-border: #E4DBCB;
  --color-accent: #C15F3C;
  --color-accent-hover: #A94E2E;
  --color-accent-soft: #F1DED3;
  --color-success: #4C7A5B;
  --color-success-soft: #DCEAE0;
  --color-warning: #B8863B;
  --color-warning-soft: #F3E6CC;
  --color-danger: #B23B3B;
  --color-danger-soft: #F3DBDB;
  --color-info: #3B6EA5;
  --color-info-soft: #DCE6F0;

  --font-display: 'Iowan Old Style', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(43, 39, 36, 0.06), 0 4px 12px rgba(43, 39, 36, 0.05);
  --shadow-pop: 0 8px 24px rgba(43, 39, 36, 0.14);
}

/* Anthropic is the only theme with a dedicated dark variant (it's the one this app
   originally shipped with full light/dark support for). Geek is dark-by-design and
   Mario is bright-by-design — neither has a separate dark mode. */
@media (prefers-color-scheme: dark) {
  [data-app-theme="anthropic"] {
    --color-bg: #211E1B;
    --color-surface: #2A2622;
    --color-surface-alt: #262320;
    --color-text: #F2EDE4;
    --color-text-muted: #B3A99C;
    --color-border: #3D372F;
    --color-accent: #E08A63;
    --color-accent-hover: #F0A47D;
    --color-accent-soft: #4A362C;
    --color-success: #7FB894;
    --color-success-soft: #24352B;
    --color-warning: #D9AF6B;
    --color-warning-soft: #3A2F1C;
    --color-danger: #E08080;
    --color-danger-soft: #3A2222;
    --color-info: #7FA8D9;
    --color-info-soft: #202C3A;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}
[data-app-theme="anthropic"][data-theme="dark"] {
  --color-bg: #211E1B;
  --color-surface: #2A2622;
  --color-surface-alt: #262320;
  --color-text: #F2EDE4;
  --color-text-muted: #B3A99C;
  --color-border: #3D372F;
  --color-accent: #E08A63;
  --color-accent-hover: #F0A47D;
  --color-accent-soft: #4A362C;
  --color-success: #7FB894;
  --color-success-soft: #24352B;
  --color-warning: #D9AF6B;
  --color-warning-soft: #3A2F1C;
  --color-danger: #E08080;
  --color-danger-soft: #3A2222;
  --color-info: #7FA8D9;
  --color-info-soft: #202C3A;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.4);
}
[data-app-theme="anthropic"][data-theme="light"] {
  --color-bg: #F5F0E8;
  --color-surface: #FFFFFF;
  --color-surface-alt: #FAF6EE;
  --color-text: #2B2724;
  --color-text-muted: #6B635A;
  --color-border: #E4DBCB;
  --color-accent: #C15F3C;
  --color-accent-hover: #A94E2E;
  --color-accent-soft: #F1DED3;
}
