/* ============================================================
   EHSIA – assets/css/variables.css
   Design tokens & CSS custom properties
   ============================================================ */

:root {
    /* Brand Palette */
    --twine:         #c0a463;
    --laurel:        #6a9a75;
    --cutty-sark:    #54857a;
    --tarawera:      #0a425c;
    --matisse:       #177d90;
    --teal-blue:     #043c54;
    --flamingo:      #ec642c;
    --sea-green:     #2f7c46;

    /* Semantic Colours */
    --primary:       var(--matisse);
    --primary-dark:  var(--teal-blue);
    --secondary:     var(--cutty-sark);
    --success:       var(--sea-green);
    --warning:       var(--twine);
    --danger:        var(--flamingo);
    --info:          var(--laurel);
    --dark:          var(--tarawera);

    /* Neutrals */
    --light:         #f8fafc;
    --white:         #ffffff;
    --border:        #e2e8f0;
    --action-bg:     #e0f2fe;

    /* Shadows */
    --shadow:        0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg:     0 4px 16px rgba(0,0,0,0.12);

    /* Radii */
    --radius:        6px;
    --radius-lg:     8px;

    /* Transitions */
    --transition:    all 0.2s ease;
    --portal-transition: all 0.3s ease;

    /* Gradients */
    --gradient-primary:   linear-gradient(135deg, var(--primary)  0%, var(--teal-blue)  100%);
    --gradient-secondary: linear-gradient(135deg, var(--secondary) 0%, var(--cutty-sark) 100%);
    --gradient-success:   linear-gradient(135deg, var(--success)   0%, var(--sea-green)  100%);
    --gradient-warning:   linear-gradient(135deg, var(--warning)   0%, var(--twine)      100%);
    --gradient-danger:    linear-gradient(135deg, var(--danger)    0%, var(--flamingo)   100%);
    --gradient-info:      linear-gradient(135deg, var(--info)      0%, var(--laurel)     100%);
}