/* ══════════════════════════════════════
   DESIGN TOKENS — variables.css
   Block: Global CSS custom properties
   ══════════════════════════════════════ */

:root {
    /* ── Palette ── */
    --bg:           #f5f4f0;
    --white:        #ffffff;
    --ink:          #0f1117;
    --ink2:         #3d4050;
    --ink3:         #9095a8;
    --ink4:         #c8cad4;
    --border:       #e4e3de;

    --surface-2: #f1f1f1;
    --card-bg: var(--white);

    /* ── Brand ── */
    --accent:          #00c054;
    --accent-dark:     #1f5a39;
    --accent-light:    #e6f9ee;
    --brand-gradient:     linear-gradient(314deg, #618f3b 0%, #00c054 100%);
    --brand-gradient-alt: linear-gradient(139deg, #15bc5e 0%, #1f5a39 100%);

    /* ── Semantic colours ── */
    --green:        #16a34a;
    --green-light:  #dcfce7;
    --red:          #dc2626;
    --red-light:    #fee2e2;
    --orange:       #ea580c;
    --orange-light: #ffedd5;
    --teal:         #0d9488;
    --teal-light:   #ccfbf1;
    --yellow:       #d97706;
    --yellow-light: #fef3c7;
    --pink:         #db2777;
    --pink-light:   #fce7f3;

    /* ── Shape ── */
    --radius:    16px;
    --radius-sm: 10px;

    /* ── Shadow ── */
    --shadow:    0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
    --shadow-md: 0 4px 24px rgba(0,0,0,.08);
}