/* ============================================================
   BRAHMI WORD SHOOTER — Design Tokens
   ============================================================ */

:root {
    /* ── Color Palette ─────────────────────────────────── */
    --color-background:      #F7F1E5;
    --color-surface:         #FFFDF8;
    --color-surface-alt:     #EFE6D4;
    --color-surface-deep:    #E4D9C5;

    --color-primary:         #8C4A32;
    --color-primary-dark:    #603021;
    --color-primary-light:   #B06048;

    --color-gold:            #C49A52;
    --color-gold-light:      #E4C98A;
    --color-gold-pale:       #F2E4C0;

    --color-green:           #60745B;
    --color-green-dark:      #40503D;

    --color-text:            #302820;
    --color-text-muted:      #8C8174;
    --color-text-light:      #A89E90;

    --color-letter-inactive: #B8B0A4;
    --color-letter-active:   #302820;
    --color-letter-current:  #8C4A32;

    --color-danger:          #A95345;
    --color-danger-light:    #C87060;
    --color-success:         #60745B;
    --color-success-light:   #7A9475;

    --color-border:          #D8CCB8;
    --color-border-strong:   #C0B09A;

    /* ── Shadows ───────────────────────────────────────── */
    --shadow-sm:    0 1px 3px rgba(48, 40, 32, 0.10);
    --shadow-md:    0 4px 12px rgba(48, 40, 32, 0.12);
    --shadow-lg:    0 8px 28px rgba(48, 40, 32, 0.16);
    --shadow-inset: inset 0 2px 8px rgba(48, 40, 32, 0.10);
    --shadow-gold:  0 0 16px rgba(196, 154, 82, 0.40);
    --shadow-key:   0 2px 6px rgba(48, 40, 32, 0.12), 0 1px 0 rgba(255,255,255,0.6) inset;

    /* ── Typography ────────────────────────────────────── */
    --font-ui:     'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-hindi:  'Hind', 'Noto Sans Devanagari', sans-serif;
    --font-brahmi: 'Noto Sans Brahmi', 'BrahmiGame', sans-serif;

    --fs-xs:   0.70rem;   /*  11px */
    --fs-sm:   0.80rem;   /*  13px */
    --fs-base: 0.938rem;  /*  15px */
    --fs-md:   1.063rem;  /*  17px */
    --fs-lg:   1.25rem;   /*  20px */
    --fs-xl:   1.50rem;   /*  24px */
    --fs-2xl:  1.875rem;  /*  30px */
    --fs-3xl:  2.25rem;   /*  36px */
    --fs-4xl:  3.00rem;   /*  48px */

    --brahmi-size-key:    1.50rem;
    --brahmi-size-target: 2.75rem;
    --brahmi-size-fall:   2.25rem;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold: 600;
    --fw-bold:    700;

    --lh-tight:   1.2;
    --lh-base:    1.6;

    /* ── Spacing ───────────────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.50rem;
    --space-3:  0.75rem;
    --space-4:  1.00rem;
    --space-5:  1.25rem;
    --space-6:  1.50rem;
    --space-8:  2.00rem;
    --space-10: 2.50rem;
    --space-12: 3.00rem;
    --space-16: 4.00rem;

    /* ── Border Radius ─────────────────────────────────── */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-pill: 999px;

    /* ── Transitions ───────────────────────────────────── */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   450ms cubic-bezier(0.22, 0.61, 0.36, 1);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Layout ────────────────────────────────────────── */
    --header-height:       56px;
    --keyboard-height-min: 240px;
    --game-area-min:       300px;
    --content-max-width:   900px;
}