/* ============================================
   LANGY DESIGN SYSTEM — VARIABLES
   Calm AI / Soft Tech palette
   ============================================ */

:root {
    /* ---- Colors ---- */
    --bg:           #F4F1ED;
    --bg-alt:       #EAE5DF;
    --surface:      #FFFFFF;
    --surface-alt:  #F7F5F2;
    --border:       #E2DCD3;
    --border-light: #EBE6DF;

    --text:         #2B2A35;
    --text-secondary: #706F7A;
    --text-tertiary:  #A1A0AB;
    --text-inverse: #FFFFFF;

    --primary:      #10B981;
    --primary-light:#34D399;
    --primary-dark: #059669;
    --primary-bg:   rgba(16, 185, 129, 0.08);
    --primary-bg-hover: rgba(16, 185, 129, 0.14);

    --accent:       #FBBF24;
    --accent-light: #FCD34D;
    --accent-dark:  #D97706;
    --accent-bg:    rgba(251, 191, 36, 0.10);

    --reward-gold:  #F59E0B;
    --reward-gold-light: #FCD34D;
    --reward-gold-bg: rgba(245, 158, 11, 0.10);
    --reward-silver:#94A3B8;

    --danger:       #EF4444;
    --danger-bg:    rgba(239, 68, 68, 0.08);
    --warning:      #F97316;
    --info:         #3B82F6;

    /* ---- Typography ---- */
    --font:         'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fs-xs:        0.6875rem;   /* 11px */
    --fs-sm:        0.75rem;     /* 12px */
    --fs-base:      0.875rem;    /* 14px */
    --fs-md:        1rem;        /* 16px */
    --fs-lg:        1.125rem;    /* 18px */
    --fs-xl:        1.375rem;    /* 22px */
    --fs-2xl:       1.75rem;     /* 28px */
    --fs-3xl:       2.25rem;     /* 36px */
    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-black:     900;

    /* ---- Spacing ---- */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* ---- Radii ---- */
    --radius-sm:  12px;
    --radius-md:  16px;
    --radius-lg:  20px;
    --radius-xl:  24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* ---- Shadows ---- */
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.10);
    --shadow-xl:  0 12px 48px rgba(0,0,0,0.12);
    --shadow-glow-primary: 0 4px 24px rgba(16, 185, 129, 0.25);
    --shadow-glow-accent:  0 4px 24px rgba(251, 191, 36, 0.25);
    --shadow-glow-gold:    0 4px 24px rgba(245, 158, 11, 0.30);

    /* ---- Transitions ---- */
    --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:   150ms;
    --duration-normal: 250ms;
    --duration-slow:   400ms;
    --duration-cinematic: 700ms;

    /* ---- Z-Index ---- */
    --z-base:    1;
    --z-sticky:  100;
    --z-overlay: 500;
    --z-modal:   1000;
    --z-toast:   2000;

    /* ---- Layout ---- */
    --app-max-width: 430px;
    --safe-bottom:   env(safe-area-inset-bottom, 0px);
    --header-height: 56px;
}

:root.dark {
    --bg:           #121212;
    --bg-alt:       #1E1E1E;
    --surface:      #1E1E1E;
    --surface-alt:  #2A2A2A;
    --border:       #333333;
    --border-light: #2A2A2A;

    --text:         #E5E5E5;
    --text-secondary: #9CA3AF;
    --text-tertiary:  #6B7280;
    --text-inverse: #1F2937;
}