/* ==== css/00-tokens.css ==== */
/* ============================================================
   SOKOHAI DESIGN TOKENS (Phase 3)
   Msingi wa rangi/nafasi/kivuli wa mfumo mzima.
   ⚠️ Hii ni ADDITIVE tu — haibadilishi style yoyote iliyopo
   (01-core.css na zake zinaendelea kutumika kama kawaida).
   Matumizi mapya: var(--skh-...)
   ============================================================ */
:root {
    /* --- Canonical semantic palette: green identity, blue support --- */
    --sokohai-green:       #18A982;
    --sokohai-green-dark:  #17604E;
    --sokohai-green-soft:  #EAF8F2;
    --sokohai-blue:        #4D91AA;
    --sokohai-blue-soft:   #F0F7FA;
    --sokohai-gold:        #D8B83A;
    --sokohai-gold-soft:   #FBF7E7;
    --sokohai-background:  #FFFFFF;
    --sokohai-surface:     #FFFFFF;
    --sokohai-surface-soft:#F8FBFA;
    --sokohai-text:        #18352D;
    --sokohai-text-2:      #65757A;
    --sokohai-border:      #E5ECEC;
    --sokohai-danger:      #D9534F;

    /* Compatibility aliases for existing components. */
    --skh-primary:        var(--sokohai-green);
    --skh-soft:           #35B892;
    --skh-deep:           var(--sokohai-green-dark);
    --skh-primary-dark:   var(--sokohai-text);
    --skh-primary-light:  var(--sokohai-green-soft);
    --skh-gold:           var(--sokohai-gold);
    --skh-green:          var(--sokohai-green);
    --skh-green-dark:     var(--sokohai-green-dark);
    --skh-red:            var(--sokohai-danger);
    --skh-red-dark:       #B63E3A;
    --skh-orange:         #C88216;

    /* --- Neutrals --- */
    --skh-ink:            var(--sokohai-text);
    --skh-ink-soft:       #526962;
    --skh-muted:          var(--sokohai-text-2);
    --skh-line:           var(--sokohai-border);
    --skh-bg:             var(--sokohai-background);
    --skh-text:           var(--sokohai-text);
    --skh-surface:        var(--sokohai-surface);

    /* --- Status --- */
    --skh-success-bg:     #ecfdf5;
    --skh-warn-bg:        #fffbeb;
    --skh-danger-bg:      #fef2f2;
    --skh-info-bg:        #eff6ff;

    /* --- Radius --- */
    --skh-radius-sm:      8px;
    --skh-radius:         12px;
    --skh-radius-lg:      16px;
    --skh-radius-pill:    999px;

    /* --- Shadows --- */
    --skh-shadow-sm:      0 1px 3px rgba(15, 23, 42, 0.08);
    --skh-shadow:         0 4px 14px rgba(15, 23, 42, 0.10);
    --skh-shadow-lg:      0 12px 32px rgba(15, 23, 42, 0.16);

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

    /* --- Typography --- */
    --skh-font:           'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', sans-serif;
    --skh-font-size-xs:   11px;
    --skh-font-size-sm:   13px;
    --skh-font-size-md:   15px;
    --skh-font-size-lg:   18px;
    --skh-weight-bold:    800;

    /* --- Motion --- */
    --skh-ease:           cubic-bezier(.22,1,.36,1);
    --skh-speed:          0.22s;
}