:root {
    /* ─── BRAND ─────────────────────────────────────────────── */
    --color-brand:        #f28c28;
    --color-brand-dark:   #c76f18;
    --color-brand-light:  #fde8c8;
    --color-yellow:       #f6c343;
    --color-yellow-light: #fef9e7;

    /* ─── NEUTRAL PALETTE ────────────────────────────────────── */
    --color-ink:          #1f2430;
    --color-ink-soft:     #3e4656;
    --color-ink-mid:      #59616f;
    --color-muted:        #6f7785;
    --color-line:         #e3e7ee;
    --color-line-soft:    #f0f2f5;
    --color-page:         #f4f5f7;
    --color-surface:      #ffffff;
    --color-surface-1:    #fafbfc;
    --color-surface-2:    #f4f5f7;

    /* ─── SEMANTIC STATUS ────────────────────────────────────── */
    --color-success:      #18865a;
    --color-success-bg:   #e6f4ef;
    --color-danger:       #c83d32;
    --color-danger-bg:    #fce8e6;
    --color-warning:      #b86d12;
    --color-warning-bg:   #fff4d6;
    --color-info:         #286aa8;
    --color-info-bg:      #e6f0f9;

    /* ─── TYPOGRAPHY ─────────────────────────────────────────── */
    --font-sans: 'Inter', system-ui, -apple-system, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    --text-xs:   0.6875rem;   /* 11px */
    --text-sm:   0.75rem;     /* 12px */
    --text-base: 0.875rem;    /* 14px */
    --text-md:   1rem;        /* 16px */
    --text-lg:   1.125rem;    /* 18px */
    --text-xl:   1.25rem;     /* 20px */
    --text-2xl:  1.5rem;      /* 24px */
    --text-3xl:  2rem;        /* 32px */
    --text-hero: clamp(2rem, 4vw, 3.1rem);

    --leading-tight: 1.15;
    --leading-snug:  1.35;
    --leading-base:  1.55;

    --weight-normal:    400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;
    --weight-extrabold: 800;
    --weight-black:     900;

    /* ─── SPACING (base 4px) ─────────────────────────────────── */
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */

    /* ─── BORDER RADIUS ──────────────────────────────────────── */
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* ─── SHADOWS ────────────────────────────────────────────── */
    --shadow-xs:    0 1px 2px  rgba(31, 36, 48, 0.04);
    --shadow-sm:    0 2px 8px  rgba(31, 36, 48, 0.06);
    --shadow-md:    0 4px 16px rgba(31, 36, 48, 0.09);
    --shadow-lg:    0 8px 32px rgba(31, 36, 48, 0.13);
    --shadow-soft:  0 12px 30px rgba(31, 36, 48, 0.08);
    --shadow-brand: 0 8px 24px rgba(242, 140, 40, 0.20);

    /* ─── ANIMATION ──────────────────────────────────────────── */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 350ms;
    --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);

    /* ─── LAYOUT ─────────────────────────────────────────────── */
    --sidebar-width:           320px;
    --sidebar-collapsed-width: 92px;
    --content-max-width:       1480px;
    --content-padding:         var(--space-4);
}