/* /client/static/css/variables.css */

/*
  This file centralizes all design tokens for the application.
  It includes colors (both Light and Dark themes), typography, spacing, 
  shadows, transitions, and responsive breakpoints.
*/

:root {
    /* --- Brand Color Palette --- */
    --color-primary-rgb: 61, 102, 201;
    --color-secondary-rgb: 235, 163, 64;

    --color-primary: rgb(var(--color-primary-rgb));
    --color-secondary: rgb(var(--color-secondary-rgb));
    --color-accent: #FBB80B;

    /* --- Light Theme Tokens --- */
    --color-text: #333;
    --color-text-muted: #6c757d;
    --color-text-inverse: #fff;
    --color-background: #fff;
    --color-surface: #f8f9fa;
    --color-surface-card: #fff;
    --color-border: #dee2e6;
    --color-footer-bg: var(--color-primary);
    --color-footer-text: var(--color-text-inverse);

    /* --- Gradients --- */
    --gradient-primary: linear-gradient(135deg, #3D66C9, #5B7FDB);

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

    /* --- Spacing System --- */
    --space-xs: 0.25rem;  /* 4px */
    --space-sm: 0.5rem;   /* 8px */
    --space-md: 1rem;     /* 16px */
    --space-lg: 1.5rem;   /* 24px */
    --space-xl: 2rem;     /* 32px */
    --space-xxl: 4rem;    /* 64px */

    /* --- Borders & Radius --- */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-width: 1px;

    /* --- Shadows --- */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, .075);
    --shadow-md: 0 8px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 1rem 3rem rgba(0,0,0,.175);

    /* --- Card System Tokens --- */
    --card-radius: var(--border-radius-lg);
    --card-padding-y: var(--space-lg);
    --card-padding-x: var(--space-xl);
    --card-padding: var(--card-padding-y) var(--card-padding-x);
    --card-bg: var(--color-surface-card);
    --card-border: var(--border-width) solid var(--color-border);
    --card-shadow: var(--shadow-sm);
    --card-shadow-hover: var(--shadow-md);
    --card-transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    --card-hover-transform: translateY(-4px);
    --card-img-radius: var(--border-radius-md);

    /* --- Breakpoints (Mobile-First) --- */
    --bp-sm: 36em;
    --bp-md: 48em;
    --bp-lg: 62em;
    --bp-xl: 75em;

    /* --- Transitions --- */
    --transition-fast: 0.2s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-spring: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- Dark Theme Tokens --- */
[data-theme="dark"] {
    --color-text: #e0e0e0;
    --color-text-muted: #aaa;
    --color-text-inverse: #121212;

    --color-background: #121212;
    --color-surface: #1e1e1e;
    --color-surface-card: #242424;
    --color-border: #444;

    --color-footer-bg: var(--color-surface);
    --color-footer-text: var(--color-text-muted);
}