/* ==========================================================================
   WK Growth Matrix — Design tokens
   Brand palette taken from the Executive Corporate Presentation (LA-01.1)
   Navy #0E1E42 · Gold #C9A227 · Sand #DED8C8 · Cream #FAF8F3
   ========================================================================== */

:root {
    /* --- Brand ---------------------------------------------------------- */
    --navy-900: #070E22;
    --navy-800: #0A1633;
    --navy-700: #0E1E42;
    --navy-600: #16295A;
    --navy-500: #23386A;
    --navy-400: #3C5088;

    --gold-700: #7A600F;
    --gold-600: #A8851C;
    --gold-500: #C9A227;
    --gold-400: #DCBB4E;
    --gold-300: #E8D28A;
    --gold-100: #F5EBCB;

    --sand-400: #CFC7B2;
    --sand-300: #DED8C8;
    --sand-200: #EBE7DC;
    --sand-100: #F1EFE9;
    --cream:    #FAF8F3;
    --white:    #FFFFFF;

    /* --- Semantic ------------------------------------------------------- */
    --ink:          #131C33;
    --ink-soft:     #3B455E;
    --ink-muted:    #5C6579;
    --on-dark:      #F4F2EC;
    --on-dark-soft: #B9C0D0;

    --surface:        var(--cream);
    --surface-raised: var(--white);
    --surface-alt:    var(--sand-100);
    --surface-dark:   var(--navy-700);

    --line:        #E2DED2;
    --line-strong: #CFC7B2;
    --line-dark:   rgba(255, 255, 255, .14);

    --accent:       var(--gold-500);
    --accent-ink:   var(--gold-700);
    --danger:       #B3261E;
    --success:      #1F7A4C;

    /* --- Typography ------------------------------------------------------ */
    --font-display: "Archivo", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-body:    "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-arabic:  "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", "Dubai", "Noto Sans Arabic", sans-serif;
    --font-mono:    ui-monospace, "SFMono-Regular", "Consolas", monospace;

    --step--1: clamp(.8rem,  .77rem + .15vw, .875rem);
    --step-0:  clamp(.95rem, .92rem + .18vw, 1.0625rem);
    --step-1:  clamp(1.1rem, 1.04rem + .3vw, 1.3rem);
    --step-2:  clamp(1.35rem, 1.22rem + .6vw, 1.75rem);
    --step-3:  clamp(1.7rem, 1.45rem + 1.1vw, 2.4rem);
    --step-4:  clamp(2.1rem, 1.6rem + 2.1vw, 3.4rem);
    --step-5:  clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem);

    /* --- Space ----------------------------------------------------------- */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;

    --section-y: clamp(3.5rem, 2.2rem + 5vw, 7rem);
    --container: 1220px;
    --container-narrow: 880px;
    --gutter: clamp(1.1rem, .6rem + 2vw, 2.5rem);

    /* --- Shape ----------------------------------------------------------- */
    --radius-xs: 3px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(10, 22, 51, .06);
    --shadow-sm: 0 4px 14px rgba(10, 22, 51, .07);
    --shadow-md: 0 14px 34px -12px rgba(10, 22, 51, .18);
    --shadow-lg: 0 30px 60px -24px rgba(10, 22, 51, .3);

    --ring: 0 0 0 3px rgba(201, 162, 39, .35);

    --ease: cubic-bezier(.22, .61, .36, 1);
    --dur: .28s;

    --header-h: 78px;
}

@media (max-width: 900px) {
    :root { --header-h: 66px; }
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur: .001s; }
}