/* ============================================================
   SSO Election — Design Tokens (CSS Variables)
   "Sovereign Horizon" Design System
   ============================================================ */

:root {
    /* Primary */
    --primary: #003f87;
    --primary-container: #0056b3;
    --on-primary: #ffffff;
    --on-primary-container: #bbd0ff;

    /* Surface Hierarchy */
    --surface: #faf8ff;
    --surface-container-low: #f2f3fd;
    --surface-container-lowest: #ffffff;
    --surface-container: #ededf7;
    --surface-container-high: #e7e7f1;
    --surface-container-highest: #e1e3e4;

    /* On-Surface */
    --on-surface: #191b22;
    --on-surface-variant: #424752;

    /* Outline */
    --outline-variant: rgba(194, 198, 212, 0.2);
    --outline-variant-solid: #c2c6d4;

    /* Secondary */
    --secondary-container: #e1e3e4;
    --on-secondary-container: #626566;

    /* Error */
    --error: #ba1a1a;
    --error-container: #ffdad6;
    --on-error-container: #93000a;

    /* Gradient */
    --primary-gradient: linear-gradient(135deg, #003f87 0%, #0056b3 100%);

    /* Input */
    --input-bg: #f3f4f9;

    /* Typography */
    --font-headline: 'Public Sans', sans-serif;
    --font-body: 'Noto Sans Thai', 'Public Sans', sans-serif;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;

    /* Ambient Shadow */
    --shadow-ambient: 0 12px 32px -4px rgba(25, 27, 34, 0.06);
    --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.03);
    --shadow-primary: 0 4px 12px rgba(0, 63, 135, 0.2);
}