/* ===========================
   SIGIS ROOT TOKENS
   Purpose: Global design tokens (colors, neutrals)

   Recommended load order:
     1) root.css
     2) common.css
     3) header.css
     4) page-specific css
   =========================== */

:root {
    /* =========================================================
       ORIGINAL BRAND TOKENS (PRESERVED)
       ========================================================= */

    --color-1: #fdb927;
    --color-2: #004fa3;
    --color-3: #7d8995;

    --color-1-dark: #60460f;
    --color-1-light: #fae0a8;

    --color-2-light: #97c3f1;
    --color-2-dark: #05274b;

    --color-3-light: #f0f7ff;
    --coor-3-dark: #70767c; /* NOTE: typo preserved intentionally */

    --grey: #7f7f7f;
    --light-grey: #d7d7d7;
    --dark-grey: #b3b3b3;
    --dark-slate-grey: #393939;

    --white: #ffffff;
    --black: #000000;
    --white-smoke: #f4f4f4;

    --alert-color: #fbf990;
    --send-color: #57c840;
    --cancel-color: #fd5b5b;

    /* =========================================================
       SEMANTIC ALIASES (USE THESE IN NEW CSS)
       ========================================================= */

    /* Brand */
    --color-primary: var(--color-2);
    --color-primary-light: var(--color-2-light);
    --color-primary-dark: var(--color-2-dark);

    --color-secondary: var(--color-1);
    --color-secondary-light: var(--color-1-light);
    --color-secondary-dark: var(--color-1-dark);

    /* Neutrals */
    --color-white: var(--white);
    --color-black: var(--black);

    --color-gray-100: var(--white-smoke);
    --color-gray-300: var(--light-grey);
    --color-gray-600: var(--grey);
    --color-gray-900: var(--dark-slate-grey);

    /* Status */
    --color-accent: var(--cancel-color);
    --color-success: var(--send-color);
    --color-warning: var(--alert-color);

    /* =========================================================
       TYPOGRAPHY
       ========================================================= */

    --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* =========================================================
       SPACING SCALE
       ========================================================= */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* =========================================================
       BORDERS & RADIUS
       ========================================================= */

    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 10px;

    /* =========================================================
       SHADOWS
       ========================================================= */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 3px 8px rgba(0, 0, 0, 0.12);

    /* =========================================================
       Z-INDEX SYSTEM (OPTIONAL BUT CLEAN)
       ========================================================= */

    --z-header: 100;
    --z-dropdown: 200;
    --z-modal: 500;
}