@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&display=swap');

/* ==============================
   DESIGN TOKENS
================================ */

:root {
    /* Colors */
    --color-bg-900: #121212;
    --color-bg-800: #1a1a1a;
    --color-bg-700: #0a0a0a;

    --color-accent-500: #ff8c00;
    --color-accent-600: #b87333;
    --color-accent-700: #607d8b;

    /* Academy Branding (FR-074) — overridden per-academy when set */
    --academy-primary: var(--color-accent-500);
    --academy-primary-light: var(--color-accent-600);
    --academy-primary-dark: var(--color-accent-700);

    --color-text-100: #f4f1ea;
    --color-text-200: #c0c0c0;
    --color-text-300: #a5a5a5;
    --text-primary: var(--color-text-100);

    /* Semantic / state colors */
    --color-success: #28a745;
    --color-success-hover: #218838;
    --color-warning: #ffc107;
    --color-warning-hover: #e0a800;
    --color-danger: #b00020;
    --color-danger-text: #ff6b6b;
    --color-info: #17a2b8;

    /* Accent variants (certification cards, components) */
    --color-accent-amber: #ffb74d;
    --color-accent-copper: #b87333;

    /* Short aliases — referenced by JS inline styles and CSS utilities */
    --accent-amber: var(--color-accent-amber);
    --accent-copper: var(--color-accent-copper);
    --accent-gold: #e0aa3e;

    /* Text variants */
    --color-text-inverse: #0f0f0f;
    --color-text-on-solid: #ffffff;

    /* Accent scale */
    --color-accent-400: #f57c00;

    /* Effects */
    --glass-bg: rgba(26, 26, 26, 0.8);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --opacity-disabled: 0.38;
    --opacity-hover: 0.92;
    --opacity-active: 0.78;

    /* Typography */
    --font-heading: 'Oswald', sans-serif;
    --font-body: system-ui, -apple-system, Segoe UI, sans-serif;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;

    /* Radius */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;

    /* Effects */
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
    --glass-border: rgba(255, 255, 255, 0.08);

    /* Grayscale utility scale — borders, muted text, dividers */
    --color-gray-100: #cccccc;
    --color-gray-300: #999999;
    --color-gray-400: #888888;
    --color-gray-500: #666666;
    --color-gray-600: #555555;
    --color-gray-700: #444444;
    --color-gray-800: #333333;
    --color-gray-900: #111111;

    /* Chart palette */
    --color-chart-primary: #ffd700;
    --color-chart-secondary: #00d4ff;
    --color-chart-bar: #ff0055;
    --color-chart-text: #e0e0e0;

    /* Zone / target editor palette */
    --color-zone-shoot: #00c864;
    --color-zone-no-shoot: #ff0000;
    --color-zone-rect: #c86400;
    --color-zone-poly: #6400c8;

    /* Grayscale utility scale (gap fill) */
    --color-gray-200: #aaaaaa;

    /* Interactive accent (zone editor, toggles) */
    --color-accent-blue: #4a9eff;

    /* Danger variant (bright, for inline labels) */
    --color-danger-bright: #d32f2f;

    /* Hover / focus effects */
    --color-hover-accent: rgba(255, 140, 0, 0.1);
    --color-hover-accent-subtle: rgba(255, 140, 0, 0.05);
    --color-focus-ring: rgba(255, 140, 0, 0.2);

    /* Glass-white overlays */
    --color-glass-white-03: rgba(255, 255, 255, 0.03);
    --color-glass-white-04: rgba(255, 255, 255, 0.04);
    --color-glass-white-05: rgba(255, 255, 255, 0.05);

    /* Dark semantic variants */
    --color-success-dark: #1e7e34;
    --color-warning-dark: #d39e00;

    /* Semantic overlays */
    --color-overlay: rgba(0, 0, 0, 0.7);
    --color-overlay-dark: rgba(0, 0, 0, 0.8);
    --color-overlay-subtle: rgba(0, 0, 0, 0.4);
    --color-danger-bg: rgba(255, 0, 0, 0.1);
    --color-success-bg: rgba(40, 167, 69, 0.2);

    /* Textures */
    --texture-knurled: radial-gradient(circle, rgba(255, 140, 0, 0.15) 1px, transparent 1px);
}

/* Light mode — overrides when data-theme="light" on body */
[data-theme="light"] {
    --color-bg-900: #f5f5f5;
    --color-bg-800: #ffffff;
    --color-bg-700: #e8e8e8;

    --color-text-100: #1a1a1a;
    --color-text-200: #555555;
    --color-text-300: #666666;

    --glass-bg: rgba(255, 255, 255, 0.9);

    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
    --glass-border: rgba(0, 0, 0, 0.08);

    --color-gray-100: #555555;
    --color-gray-300: #777777;
    --color-gray-400: #888888;
    --color-gray-500: #999999;
    --color-gray-600: #aaaaaa;
    --color-gray-700: #cccccc;
    --color-gray-800: #dddddd;
    --color-gray-900: #eeeeee;

    --color-glass-white-03: rgba(0, 0, 0, 0.03);
    --color-glass-white-04: rgba(0, 0, 0, 0.04);
    --color-glass-white-05: rgba(0, 0, 0, 0.05);
    --color-hover-accent: rgba(255, 140, 0, 0.08);
    --color-overlay: rgba(0, 0, 0, 0.5);
    --color-overlay-subtle: rgba(0, 0, 0, 0.25);
    --color-success-dark: #176b2a;
    --color-warning-dark: #c29200;

    --texture-knurled: radial-gradient(circle, rgba(255, 140, 0, 0.08) 1px, transparent 1px);
}