/* ==========================================================================
   GreenFish Design Tokens
   Single source of truth for the unified responsive UI.

   Cascade layers (order = ascending priority). Later files put their rules
   in these layers; unlayered page-level CSS always wins over layered rules.
   ========================================================================== */
@layer reset, base, components, shell, pages, utilities;

/* Breakpoints (media queries can't read custom properties — keep in sync):
   640px  = small phone → large phone
   768px  = SHELL SWITCH: bottom-nav app shell below, header nav above
   1024px = tablet → desktop
   1280px = max content width
*/

:root {
    /* ── Primitives: brand orange ramp ─────────────────────────────── */
    --orange-50:  #FFF4EF;
    --orange-100: #FFE4D6;
    --orange-300: #FFB08A;
    --orange-500: #FF6B35;
    --orange-600: #E55A2B;
    --orange-700: #CC4E1E;

    /* Warm accent (offers / loyalty) */
    --gold-400: #F7B733;
    --gold-500: #F5A623;

    /* Warm neutrals */
    --cream-bg:   #FFFAF6;
    --cream-mid:  #F8F4EF;
    --gray-50:  #FBFAF8;
    --gray-100: #F4F1EC;
    --gray-200: #ECE7E2;
    --gray-300: #DDD6CF;
    --gray-400: #A8A29B;
    --gray-500: #78716C;
    --gray-600: #57534E;
    --gray-800: #292420;
    --gray-900: #17130F;   /* warm ink */

    /* ── Semantic aliases (pages use ONLY these + primitives above) ── */
    --brand:        var(--orange-500);
    --brand-hover:  var(--orange-600);
    --brand-dark:   var(--orange-700);
    --brand-light:  var(--orange-50);
    --accent:       var(--gold-500);

    --bg:            var(--cream-bg);
    --surface:       #FFFFFF;
    --surface-hover: var(--gray-50);
    --surface-warm:  rgba(255, 255, 255, 0.88);
    --ink:           var(--gray-900);

    --text:           var(--gray-900);
    --text-secondary: var(--gray-600);
    --text-muted:     var(--gray-500);
    --text-inverse:   #FFFFFF;

    --border:       var(--gray-200);
    --border-light: var(--gray-100);

    --success:    #16A34A;
    --success-bg: #DCFCE7;
    --success-text: #166534;
    --warning:    #F59E0B;
    --warning-bg: #FEF3C7;
    --warning-text: #92400E;
    --error:      #DC2626;
    --error-bg:   #FEE2E2;
    --error-text: #991B1B;

    /* ── Elevation (warm-tinted) ───────────────────────────────────── */
    --shadow-sm: 0 1px 3px rgba(23, 19, 15, 0.05), 0 1px 2px rgba(23, 19, 15, 0.04);
    --shadow:    0 4px 14px rgba(23, 19, 15, 0.07);
    --shadow-lg: 0 12px 30px rgba(23, 19, 15, 0.10);
    --shadow-xl: 0 24px 60px rgba(23, 19, 15, 0.16);
    --shadow-brand: 0 12px 26px rgba(255, 107, 53, 0.28);

    /* ── Radii ─────────────────────────────────────────────────────── */
    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-full: 999px;

    /* ── Fluid type scale ──────────────────────────────────────────── */
    --text-xs:   0.75rem;
    --text-sm:   0.85rem;
    --text-base: 0.95rem;
    --text-md:   1.05rem;
    --text-lg:   clamp(1.15rem, 1rem + 0.6vw, 1.35rem);
    --text-xl:   clamp(1.4rem, 1.2rem + 0.9vw, 1.75rem);
    --text-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
    --text-3xl:  clamp(2.25rem, 1.7rem + 2.6vw, 3.4rem);
    --text-display: clamp(2.8rem, 2rem + 4vw, 5.2rem);

    /* ── Spacing (4px base) ────────────────────────────────────────── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ── Layout / shell ────────────────────────────────────────────── */
    --header-height: 72px;
    --bottom-nav-height: 62px;
    --max-width: 1280px;
    --content-width: 1180px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* ── Z-index scale ─────────────────────────────────────────────── */
    --z-header: 1000;
    --z-sticky: 1500;
    --z-drawer: 2000;
    --z-modal:  2100;
    --z-toast:  3000;
    --z-banner: 5000;

    /* ── Motion ────────────────────────────────────────────────────── */
    --transition: 0.2s ease;
    --ease-out-quart: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
}

@media (max-width: 767px) {
    :root {
        --header-height: 60px;
    }
}