/* ============================================================
   Joybunch — Design Tokens v0.0.1
   Single source of truth: docs/brand-book-v2.0.md
   THIS FILE CONTAINS ZERO VISUAL STYLES — ONLY CSS CUSTOM PROPERTIES.
   ============================================================ */

:root {

	/* ========== BRAND COLORS ========== */
	--joy-coral:        #FF6B6B;
	--joy-coral-dark:   #FF5252;
	--joy-coral-soft:   #FFB5A7;
	--joy-coral-bg:     #FFEDE8;
	--joy-coral-halo:   rgba(255, 107, 107, 0.10);

	--joy-beige:        #E9D39C;
	--joy-beige-soft:   #F2E2BC;

	--joy-cream:        #F5E2BC;
	--joy-cream-light:  #FAEDCD;
	--joy-cream-bg:     #FBF1D5;
	--joy-cream-hero:   #FFFFEF;

	--joy-sage:         #A3B18A;
	--joy-sage-light:   #D6E0CB;

	--joy-butter:       #FFD97D;
	--joy-butter-light: #FFE9A8;

	/* ========== GRAYSCALE ========== */
	--joy-graphite:      #2C2520;
	--joy-graphite-soft: #5A4F45;
	--joy-gray:          #9B9285;
	--joy-gray-light:    #E8DEC9;
	--joy-white:         #FFFFFF;

	/* ========== PASTELS (product card variety) ========== */
	--joy-pastel-mint:     #B8E0D2;
	--joy-pastel-blush:    #FFD4D4;
	--joy-pastel-butter:   #FFE9A8;
	--joy-pastel-lavender: #E8D5F0;
	--joy-pastel-sky:      #C4E5F0;
	--joy-pastel-peach:    #FFD9B5;

	/* ========== STATE COLORS ========== */
	--joy-success: #3F8E5F;
	--joy-error:   #C0392B;
	--joy-warning: #D97706;
	--joy-info:    #2C7A88;

	/* ========== SEMANTIC COLOR LAYER (brand → meaning) ========== */
	--color-text-primary:    var(--joy-graphite);
	--color-text-secondary:  var(--joy-graphite-soft);
	--color-text-tertiary:   var(--joy-gray);
	--color-text-inverse:    var(--joy-white);
	--color-text-brand:      var(--joy-coral-dark);
	--color-text-success:    var(--joy-success);
	--color-text-error:      var(--joy-error);
	--color-text-warning:    var(--joy-warning);

	--color-bg-page:         var(--joy-white);
	--color-bg-elevated:     var(--joy-white);
	--color-bg-hero:         var(--joy-white);
	--color-bg-surface-alt:  var(--joy-white);
	--color-bg-disabled:     var(--joy-cream-bg);
	--color-bg-overlay:      rgba(44, 37, 32, 0.6);
	--color-bg-skeleton:     var(--joy-gray-light);

	--color-surface-default:  var(--joy-white);
	--color-surface-hover:    #FAF6EE;
	--color-surface-pressed:  #F2EAD3;
	--color-surface-selected: var(--joy-coral-bg);
	--color-surface-disabled: var(--joy-cream-bg);

	--color-icon-default:    var(--joy-graphite);
	--color-icon-secondary:  var(--joy-graphite-soft);
	--color-icon-muted:      var(--joy-gray);
	--color-icon-brand:      var(--joy-coral);
	--color-icon-inverse:    var(--joy-white);
	--color-icon-success:    var(--joy-success);
	--color-icon-error:      var(--joy-error);

	--color-link:            var(--joy-coral-dark);
	--color-link-hover:      var(--joy-coral);
	--color-link-visited:    var(--joy-coral-dark);
	--color-focus-ring:      var(--joy-coral);
	--color-selection-bg:    rgba(255, 107, 107, 0.20);
	--color-selection-text:  var(--joy-graphite);

	--color-brand-primary:    var(--joy-coral);
	--color-brand-on-primary: var(--joy-white);
	--color-brand-secondary:  var(--joy-sage);
	--color-brand-tertiary:   var(--joy-butter);
	--color-brand-warm:       var(--joy-beige);

	/* ========== TYPOGRAPHY — families ========== */
	--joy-font-display:      'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif;
	--joy-font-body:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--joy-font-handlettered: 'Caveat', cursive;
	--joy-font-mono:         ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	/* ========== TYPOGRAPHY — scale (mobile-first) ========== */
	--joy-text-xs:    12px;
	--joy-text-sm:    13px;
	--joy-text-base:  14px;
	--joy-text-md:    15px;
	--joy-text-lg:    17px;
	--joy-text-xl:    20px;
	--joy-text-2xl:   24px;
	--joy-text-3xl:   30px;
	--joy-text-4xl:   38px;
	--joy-text-5xl:   46px;
	--joy-text-hero:  56px;

	/* ========== SPACING (8px base grid) ========== */
	--joy-space-xs:   4px;
	--joy-space-sm:   8px;
	--joy-space-md:   16px;
	--joy-space-lg:   24px;
	--joy-space-xl:   32px;
	--joy-space-2xl:  48px;
	--joy-space-3xl:  64px;
	--joy-space-4xl:  96px;

	/* ========== CONTAINER WIDTHS ========== */
	--joy-container-narrow: 560px;
	--joy-container-sm:     640px;
	--joy-container-md:     880px;
	--joy-container-lg:     1140px;
	--joy-container-xl:     1280px;

	/* ========== RADII ========== */
	--joy-radius-sm:    8px;
	--joy-radius-md:    12px;
	--joy-radius-lg:    18px;
	--joy-radius-xl:    24px;
	--joy-radius-2xl:   32px;
	--joy-radius-3xl:   60px;
	--joy-radius-pill:  9999px;

	/* ========== SHADOWS (warm-tinted, never black) ========== */
	--joy-shadow-sm:    0 1px 3px rgba(44, 37, 32, 0.06);
	--joy-shadow-md:    0 4px 12px rgba(44, 37, 32, 0.08);
	--joy-shadow-lg:    0 12px 32px rgba(44, 37, 32, 0.12);
	--joy-shadow-xl:    0 24px 60px rgba(44, 37, 32, 0.18);
	--joy-shadow-coral: 0 8px 20px rgba(255, 107, 107, 0.35);

	/* ========== BORDERS ========== */
	--border-hairline: 1px;
	--border-default:  1px;
	--border-emphasis: 2px;
	--border-thick:    4px;

	--border-color-subtle:   var(--joy-gray-light);
	--border-color-default:  var(--joy-gray-light);
	--border-color-emphasis: var(--joy-graphite-soft);
	--border-color-coral:    var(--joy-coral);
	--border-color-success:  var(--joy-success);
	--border-color-error:    var(--joy-error);
	--border-color-warning:  var(--joy-warning);
	--border-color-disabled: rgba(155, 146, 133, 0.3);
	--border-color-divider:  rgba(44, 37, 32, 0.06);

	/* ========== OPACITY SCALE ========== */
	--op-disabled:         0.6;
	--op-muted:            0.7;
	--op-overlay-light:    0.8;
	--op-overlay-dark:     0.6;
	--op-press:            0.85;
	--op-hover-ghost:      0.10;
	--op-divider:          0.06;
	--op-backdrop-strong:  0.72;
	--op-image-fade:       0.4;
	--op-confetti-default: 0.85;

	/* ========== Z-INDEX SCALE ========== */
	--z-base:            0;
	--z-raised:          1;
	--z-sticky:          50;
	--z-dropdown:        55;
	--z-sticky-header:   60;
	--z-bottomnav:       70;
	--z-floating-cta:    80;
	--z-drawer-backdrop: 85;
	--z-drawer:          86;
	--z-modal-backdrop:  90;
	--z-modal:           91;
	--z-ai-chat-open:    99;
	--z-toast:           95;
	--z-tooltip:         100;
	--z-skip-link:       1000;

	/* ========== ASPECT RATIOS ========== */
	--ar-square:        1 / 1;
	--ar-portrait:      4 / 5;
	--ar-portrait-tall: 3 / 4;
	--ar-reel:          9 / 16;
	--ar-landscape:     3 / 2;
	--ar-wide:          16 / 9;
	--ar-banner:        21 / 9;
	--ar-card:          5 / 4;
	--ar-email-hero:    2 / 1;

	/* ========== FIXED HEIGHTS ========== */
	--height-microbar:        36px;
	--height-header-mobile:   64px;
	--height-header-desktop:  80px;
	--height-bottomnav:       72px;
	--height-pdp-sticky-buy:  76px;
	--height-toast:           56px;
	--height-modal-header:    64px;
	--height-modal-footer:    72px;
	--height-input:           48px;
	--height-button-sm:       36px;
	--height-button-md:       44px;
	--height-button-lg:       52px;
	--height-button-xl:       60px;

	/* ========== MOTION ========== */
	--ease:        cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out:    cubic-bezier(0.0, 0, 0.2, 1);
	--ease-in:     cubic-bezier(0.4, 0, 1, 1);
	--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

	--dur-instant:   100ms;
	--dur-fast:      180ms;
	--dur-base:      280ms;
	--dur-slow:      420ms;
	--dur-very-slow: 800ms;
}

/* Type scale bumps up at desktop */
@media (min-width: 768px) {
	:root {
		--joy-text-3xl:  34px;
		--joy-text-4xl:  44px;
		--joy-text-5xl:  54px;
		--joy-text-hero: 68px;
	}
}