/* ============================================================
   tokens.css
   ------------------------------------------------------------
   Reset + design tokens + base html/body.
   Must load before every other stylesheet.
   ============================================================ */

/* ---------- Reset ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ---------- Design tokens ---------- */
:root {
    /* Brand */
    --navy:        #1B2A4A;
    --navy-2:      #2E4166;
    --orange:      #FF6B00;
    --orange-2:    #FFB27A;
    --cyan:        #06B6D4;
    --green:       #22C55E;
    --yellow:      #F59E0B;
    --red:         #DC2626;
    --blue:        #3B82F6;

    /* Neutral */
    --gray-50:     #FAFBFD;
    --gray-100:    #F5F7FA;
    --gray-200:    #E6E9F0;
    --gray-300:    #C5CCD9;
    --gray-400:    #9AA6B5;
    --gray-600:    #5A6A7E;
    --gray-800:    #2D3748;
    --white:       #FFFFFF;

    /* Layout */
    --radius:      10px;
    --radius-sm:   6px;
    --shadow:      0 4px 16px rgba(27, 42, 74, 0.08);
    --shadow-lg:   0 10px 32px rgba(27, 42, 74, 0.12);
    --transition:  0.2s ease;

    /* Typography */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
}

/* ---------- Base html / body ---------- */
html,
body {
    font-family: var(--font);
    background: var(--gray-100);
    color: var(--gray-800);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}