/*
 * EduGames - Interactive Learning Games
 * (c) 2025-2026 Prof. N. All rights reserved.
 *
 * File:    styles/core/tokens.css
 * Updated: 2026-10-06 15:01
 * Purpose: The design tokens: palette, type, spacing, and the semantic colors that Day, Night and the custom
 *          dimming switch. Components use the semantic tokens (--bg-*, --text-*, --color-*), never a raw color.
 *
 * Breakpoints (a media query cannot read a variable, so they are fixed here and used everywhere):
 *   768px  tablet and phone: the selector stacks, buttons get taller
 *   640px  the control panel and the scoreboard stack
 *   480px  phone: tighter padding
 *   340px  only the home page cards (two per row)
 */

:root {
  /* Palette */
  --color-primary: #007bff;
  --color-primary-dark: #0056b3;
  --color-primary-light: #90caf9;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;

  --color-white: #ffffff;
  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-500: #adb5bd;
  --color-gray-600: #5a6268; /* secondary text: 5.6:1 on the page background (the old #6c757d gave 4.26:1) */
  --color-gray-900: #212529;

  --bg-light: #f4f4f4;

  /* Typography */
  --font-family-base: 'Arial', sans-serif;
  --font-family-code: 'Courier New', monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;

  --font-weight-bold: 700;

  --line-height-sm: 1.2;
  --line-height-base: 1.5;
  --line-height-lg: 1.8;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Borders and shadows */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-width-thin: 1px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  --transition-fast: 150ms ease;

  /* Layers */
  --z-index-modal: 2000;
  --z-index-toast: 3000;
  --z-index-drag: 3500;

  /* The page column: header, footer and the main boxes are all this wide (never wider); the gutter is the space at both sides */
  --page-column: 520px;
  --page-gutter: 1rem;
  --page-column-game: 600px; /* a game page is wider: the control panel and the scoreboard sit side by side, the game area has room */

  /* ===== Semantic colors (Day). Night and the dimming slider change these below ===== */
  --bg-app: var(--bg-light);
  --bg-surface: var(--color-white);
  --bg-panel: rgba(255, 255, 255, 0.95);
  --bg-card: var(--color-white);

  --text-primary: var(--color-gray-900);
  --text-secondary: var(--color-gray-600);
  --text-inverse: var(--color-white);
  --on-primary: var(--color-white); /* text on a --color-primary button */

  --border-color: var(--color-gray-300);
  --shadow-color: rgba(0, 0, 0, 0.1);

  --bg-disabled: var(--color-gray-500);
  --text-disabled: var(--color-gray-200);

  /* tinted backgrounds for right / wrong / hint messages */
  --bg-success: color-mix(in srgb, var(--color-success) 12%, var(--bg-surface));
  --bg-danger: color-mix(in srgb, var(--color-danger) 12%, var(--bg-surface));
  --bg-warning: color-mix(in srgb, var(--color-warning) 18%, var(--bg-surface));

  /* state colors as text on the page (darker than the --color-* fills so that they pass 4.5:1), borders, and solid
     fills (tiles, chips) with the text that goes on them */
  --text-success: #1e7e34;
  --text-danger: #b02a37;
  --text-warning: #856404;
  --text-info: #0c6a7e;
  --border-success: color-mix(in srgb, var(--color-success) 55%, var(--bg-surface));
  --border-danger: color-mix(in srgb, var(--color-danger) 55%, var(--bg-surface));
  --border-warning: color-mix(in srgb, var(--color-warning) 65%, var(--bg-surface));
  --fill-success: #2e7d32;
  --on-fill-success: #ffffff;
  --fill-warning: #e0b400;
  --on-fill-warning: #1b1b1b;
  --fill-neutral: #5f6368;
  --on-fill-neutral: #ffffff;

  /* categorical colors for groups (boxes, bands): light fills with dark text in every theme; always also written out */
  --cat-1: #c9b8f7; /* violet */
  --cat-2: #9fe0ec; /* cyan */
  --cat-3: #f6dc8f; /* amber */
  --cat-4: #f5b8c8; /* rose */
  --cat-5: #b8e6b0; /* green */
  --cat-6: #f7c9a0; /* orange */
  --cat-7: #b3c7f5; /* blue */
  --cat-8: #a8e0d0; /* teal */
  --on-category: #1d2433;

  --scoreboard-bg: var(--bg-panel);
  --scoreboard-text: var(--text-primary);

  /* Aliases used by game stylesheets (they follow the theme automatically) */
  --radius-md: var(--border-radius-md);
  --color-text-heading: var(--text-primary);
  --color-text-body: var(--text-primary);
  --color-border: var(--border-color);
  --color-background-alt: var(--bg-surface);
}

/* Night palette (the dark theme below, and the dark end of the custom dimming) */
:root {
  --night-bg-app: #121212;
  --night-bg-surface: #333333;
  --night-bg-panel: rgba(51, 51, 51, 0.95);
  --night-border: #555555;
  --night-shadow: rgba(0, 0, 0, 0.6);
}

/* Night */
[data-theme="dark"] {
  --bg-app: var(--night-bg-app);
  --bg-surface: var(--night-bg-surface);
  --bg-panel: var(--night-bg-panel);
  --bg-card: var(--night-bg-surface);

  --text-primary: #ffffff;
  --text-secondary: #dddddd;
  --text-inverse: #121212;
  --on-primary: #0b1a2e;

  --border-color: var(--night-border);
  --shadow-color: var(--night-shadow);

  --bg-disabled: #4a4a4a;
  --text-disabled: #9a9a9a;

  /* lighter state colors that stand out on a dark background */
  --color-primary: #4da3ff;
  --color-primary-dark: #82bdff;
  --color-success: #6fdc8c;
  --color-danger: #ff7b86;
  --color-warning: #ffd04d;
  --color-info: #5bc0de;
  --text-success: var(--color-success);
  --text-danger: var(--color-danger);
  --text-warning: var(--color-warning);
  --text-info: var(--color-info);
}

/*
 * Custom dimming: ThemeManager sets data-dimming and --dim (0 = Day, 100 = Night) on the root element.
 * The surfaces blend between the two palettes; the text colors come from data-theme, which ThemeManager
 * flips to dark where the blended background becomes darker than the text.
 */
[data-dimming] {
  --bg-app: color-mix(in srgb, var(--night-bg-app) calc(var(--dim) * 1%), var(--bg-light));
  --bg-surface: color-mix(in srgb, var(--night-bg-surface) calc(var(--dim) * 1%), var(--color-white));
  --bg-card: var(--bg-surface);
  --bg-panel: color-mix(in srgb, var(--night-bg-panel) calc(var(--dim) * 1%), rgba(255, 255, 255, 0.95));
  --border-color: color-mix(in srgb, var(--night-border) calc(var(--dim) * 1%), var(--color-gray-300));
  --shadow-color: color-mix(in srgb, var(--night-shadow) calc(var(--dim) * 1%), rgba(0, 0, 0, 0.1));
}

/*
 * Text through the middle of the dimming slider: black on the light side and white on the dark side
 * (instead of dark gray) keeps the contrast above about 4.5:1 up to and past the point where
 * ThemeManager switches sides (level 56). Both ends match Day and Night exactly.
 */
[data-dimming][data-theme="light"] {
  --text-primary: color-mix(in srgb, #000000 calc(min(var(--dim) * 1.78, 100) * 1%), var(--color-gray-900));
  --text-secondary: color-mix(in srgb, #1f1f1f calc(min(var(--dim) * 1.78, 100) * 1%), var(--color-gray-600));
}

[data-dimming][data-theme="dark"] {
  --text-secondary: color-mix(in srgb, #dddddd calc(clamp(0, (var(--dim) - 56) * 2.27, 100) * 1%), #ffffff);
}