/* ============================================
   DESIGN TOKENS
   Central palette, typography, spacing and z-index values shared across pages
   ============================================ */

:root {
    /* Brand palette */
    --brand-primary: #ffc107;
    --brand-secondary: #4057f4;
    --brand-dark-blue: #1b3384;
    --brand-orange: #ff9800;

    /* Neutral colors */
    --neutral-black: #080d17;
    --neutral-surface: #0c152b;
    --neutral-white: #ffffff;
    --neutral-gray-50: #f3f3f3;
    --neutral-gray-300: #ccc;
    --neutral-gray-400: #aaa;
    --neutral-gray-500: #999;
    --neutral-gray-700: #333;
    --neutral-gray-900: #1a1a1a;

    /* Feedback */
    --feedback-success: #00ff00;

    /* Typography */
    --font-family-base: 'Montserrat', sans-serif;

    /* Shadows */
    --shadow-default: 0 4px 15px rgba(255, 193, 7, 0.3);
    --shadow-default-strong: 0 6px 20px rgba(255, 193, 7, 0.4);
    --shadow-button: 0 8px 25px rgba(255, 193, 7, 0.4);
    --shadow-button-strong: 0 12px 30px rgba(255, 193, 7, 0.5);

    /* Z-index hierarchy */
    --z-background: 1;
    --z-particles: 2;
    --z-floating-code: 3;
    --z-header: 100;
    --z-sticky: 1000;
    --z-floating-trust: 1000;
    --z-modal: 1010;
    --z-cursor: 9999;
    --z-cursor-dot: 10000;

    /* Legacy aliases (to be phased out) */
    --primary-color: var(--brand-primary);
    --secondary-color: var(--brand-secondary);
    --dark-blue: var(--brand-dark-blue);
    --yellow: var(--brand-primary);
    --orange: var(--brand-orange);
    --black: var(--neutral-black);
    --white: var(--neutral-white);
    --gray: var(--neutral-gray-50);
    --light-gray: var(--neutral-gray-300);
    --medium-gray: var(--neutral-gray-400);
    --placeholder-gray: var(--neutral-gray-500);
    --dark-gray: var(--neutral-gray-700);
    --text-color: var(--neutral-gray-700);
    --text-dark: var(--neutral-gray-900);
    --pure-black: #000000;
    --pure-white: #ffffff;
    --success-green: var(--feedback-success);
    --hover-yellow: #e0aa00;
}