/* ---------------------------------------------------------------------------
   SHARED WITH frontend/game/css/variables.css AND frontend/wiki/css/wiki.css.
   These three roots are one product and a player crosses between them, so a
   name means one thing everywhere or it means nothing.

   Seven names used to disagree across the two roots. --color-warning was the
   serious one: gold here, orange in the game, so the same SEMANTIC name
   rendered as two different hues on two surfaces. Orange won, because gold is
   already a resource and a warning that looks like currency is not a warning.

   --color-text-muted carried a documented contrast repair that landed in the
   game and never here, which is the failure mode in miniature: a fix applied
   once lands on one third of the product.

   --z-modal is still deliberately different (500 here, 1800 in the game) and
   is documented as such. It is the exception, not a survivor.
   --------------------------------------------------------------------------- */
/* ==========================================================================
   CSS Custom Properties - War 2050 Military/Strategic Color Palette
   ========================================================================== */

:root {
    /* ===== PRIMARY COLORS - Military Command Theme ===== */

    /* Deep Navy - Authority, Command, Night Operations */
    --color-primary-900: #0a0f1a;
    --color-primary-800: #111827;
    --color-primary-700: #1a2744;
    --color-primary-600: #243352;
    --color-primary-500: #2d4163;

    /* Tactical Gold - Rank, Achievement, Victory */
    --color-accent-gold: #d4af37;
    --color-accent-gold-light: #f4d03f;
    --color-accent-gold-dark: #b8962f;

    /* Command Red - Alert, Action, Combat */
    --color-accent-red: #dc2626;
    /* Orange did not exist on this root at all, which is why --color-warning
       was gold here and orange in the game: there was nothing else to point
       at. Same values as frontend/game/css/variables.css. */
    --color-accent-orange: #ea580c;
    --color-accent-orange-light: #fb923c;
    --color-accent-red-light: #ef4444;
    --color-accent-red-dark: #b91c1c;

    /* Strategic Green - Success, Resources, Territory */
    --color-accent-green: #059669;
    --color-accent-green-light: #10b981;
    --color-accent-green-dark: #047857;

    /* Tech Cyan - Technology, Intel, Communications */
    --color-accent-cyan: #06b6d4;
    --color-accent-cyan-light: #22d3ee;
    --color-accent-cyan-dark: #0891b2;

    /* ===== NEUTRAL COLORS ===== */
    --color-neutral-50: #f8fafc;
    --color-neutral-100: #f1f5f9;
    --color-neutral-200: #e2e8f0;
    --color-neutral-300: #cbd5e1;
    --color-neutral-400: #94a3b8;
    --color-neutral-500: #64748b;
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1e293b;
    --color-neutral-900: #0f172a;

    /* ===== SEMANTIC COLORS ===== */

    /* Supporting text — footer taglines, form helpers and hints, input
       placeholders, the password-strength readout, the auth divider.
       Twelve rules used --color-neutral-500 (#64748b) directly for this, and
       every one of them measured 4.03:1 against the #0a0f1a page: under 4.5
       everywhere, on the smallest type the site has. #94a3b8 is 7.5:1 and
       still reads as clearly subordinate to --color-neutral-100 body copy.
       Named rather than swapped in place because --color-neutral-500 is a
       PALETTE value; it is not wrong, it was just never a legible ink. */
    --color-text-muted: #8592a5;

    --color-success: var(--color-accent-green);
    --color-warning: var(--color-accent-orange);
    --color-danger: var(--color-accent-red);
    --color-info: var(--color-accent-cyan);

    /* ===== GRADIENT DEFINITIONS ===== */
    --gradient-primary: linear-gradient(135deg, var(--color-accent-gold) 0%, var(--color-accent-gold-dark) 100%);
    --gradient-hero: linear-gradient(180deg,
        var(--color-primary-900) 0%,
        var(--color-primary-800) 50%,
        var(--color-primary-700) 100%
    );
    --gradient-card: linear-gradient(145deg,
        rgba(36, 53, 85, 0.6) 0%,
        rgba(17, 24, 39, 0.8) 100%
    );
    --gradient-text: linear-gradient(90deg,
        var(--color-accent-gold) 0%,
        var(--color-accent-gold-light) 50%,
        var(--color-accent-gold) 100%
    );
    --gradient-glow: radial-gradient(
        ellipse at center,
        rgba(212, 175, 55, 0.3) 0%,
        transparent 70%
    );

    /* ===== TYPOGRAPHY ===== */
    --font-display: 'Orbitron', sans-serif;      /* Headers, Logo - Futuristic military */
    --font-heading: 'Rajdhani', sans-serif;      /* Subheadings - Technical, clean */
    --font-body: 'Exo 2', sans-serif;            /* Body text - Readable, modern */

    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */
    --font-size-4xl: 2.25rem;    /* 36px */
    --font-size-5xl: 3rem;       /* 48px */
    --font-size-6xl: 3.75rem;    /* 60px */
    --font-size-7xl: 4.5rem;     /* 72px */

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --line-height-tight: 1.1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;

    /* ===== SPACING ===== */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */

    /* ===== BORDERS & RADIUS ===== */
    --border-width: 1px;
    --border-color: rgba(212, 175, 55, 0.2);
    --border-color-hover: rgba(212, 175, 55, 0.5);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ===== SHADOWS ===== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 30px rgba(212, 175, 55, 0.3);
    --shadow-glow-strong: 0 0 60px rgba(212, 175, 55, 0.5);

    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ===== Z-INDEX ===== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
}