/* ============================================================
   DESIGN TOKENS — GTK Kepri Bedelau
   Single source of truth for color, spacing, radius, motion.
   Loaded BEFORE site.css; site.css maps its legacy --brand-*
   variables onto these, so both naming schemes stay in sync.

   Brand colors are sampled directly from the official logo
   artwork (wwwroot/images/logo-bedelau.jpg).
   ============================================================ */
:root {
    /* ── Brand palette ── */
    --color-blue:        #29B6F6;
    --color-blue-dark:   #0F6E9B;
    --color-blue-deep:   #003D5C;
    --color-orange:      #FA8500;
    --color-green:       #0C8A67;
    --color-red:         #F0472F;

    /* ── Neutrals ── */
    --color-ink:         #2C3E50;
    --color-muted:       #6C7A89;
    --color-line:        #E2E8F0;
    --color-surface:     #FFFFFF;
    --color-surface-alt: #F0F7FF;
    --color-tint:        #E3F6FF;

    /* ── Tinted ramps derived from the four logo colours ──
       Cards, callouts and coloured headers used to pick ad-hoc indigo, purple
       and amber values that appear nowhere in the logo. These are the only
       fills and rules those components should reach for: a wash, a border and
       two text weights per brand colour. */
    --tint-blue:          #E3F6FF;
    --tint-blue-line:     #A6DEF6;
    --ink-blue:           #0F6E9B;
    --ink-blue-deep:      #003D5C;

    --tint-orange:        #FFF3E3;
    --tint-orange-line:   #FFD6A5;
    --ink-orange:         #C26800;
    --ink-orange-deep:    #8A4A00;

    --tint-green:         #E4F5F0;
    --tint-green-line:    #A8DCCB;
    --ink-green:          #0C8A67;
    --ink-green-deep:     #064F3B;

    --tint-red:           #FDECE9;
    --tint-red-line:      #F8BDB2;
    --ink-red:            #D13A25;
    --ink-red-deep:       #A02718;

    /* ── Category accents ── */
    --color-kat-transformatif:     var(--color-blue);
    --color-kat-kepsek:   #27AE60;
    --color-kat-pengawas: #8E44AD;
    --color-kat-dedikatif:   #E67E22;

    /* ── Radius ── */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* ── Layout ── */
    --container-width: 1280px;
    --section-padding-desktop: 120px;
    --section-padding-mobile: 72px;

    /* ── Elevation ── */
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, .08);
    --shadow-lg: 0 20px 48px rgba(16, 24, 40, .12);

    /* ── Motion ── */
    --ease-out-soft: cubic-bezier(.16, 1, .3, 1);
    --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
    --dur-fast: .18s;
    --dur-base: .32s;
    --dur-slow: .7s;
}