/* ==========================================================================
   Design Tokens
   Brand: Tired Koala — https://tiredkoala.com
   Source: TiredKoala-Brand / branding-guidelines
   ========================================================================== */

:root {
    /* ── Colors ── */
    --color-bg:           #002d20;   /* brand dark green  */
    --color-bg-surface:   #003d2b;   /* elevated surface  */
    --color-accent:       #00966c;   /* brand primary green */
    --color-accent-dim:   #006b4d;   /* darker accent (hover / pressed) */
    --color-text:         #e6f4ef;   /* primary text on dark */
    --color-text-muted:   #6aad94;   /* secondary / hint text */
    --color-error:        #ff7b72;   /* destructive / error state */
    --color-border:       rgba(0, 150, 108, 0.18);

    /* ── Typography ── */
    --font-family:        'Inter', system-ui, sans-serif;
    --font-size-xs:       0.75rem;   /* 12px */
    --font-size-sm:       0.8rem;    /* ~13px */
    --font-size-base:     1rem;      /* 16px */
    --font-weight-light:  300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --line-height-base:   1.5;

    /* ── Spacing ── */
    --space-xs:   0.4rem;
    --space-sm:   0.6rem;
    --space-md:   1rem;
    --space-lg:   2rem;
    --space-xl:   2.5rem;
    --space-2xl:  3rem;

    /* ── Border radius ── */
    --radius-sm:  4px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --radius-pill: 999px;

    /* ── Shadows ── */
    --shadow-card: 0 24px 64px rgba(0, 0, 0, 0.4),
                   0 0 0 1px rgba(0, 150, 108, 0.08);

    /* ── Motion ── */
    --duration-fast:   0.2s;
    --duration-base:   0.5s;
    --duration-loader: 1.6s;
    --easing-default:  ease;
    --easing-smooth:   ease-in-out;
}