/* ========================================= ARYAÉ GLOBAL ROOT TOKENS ========================================= */ :root, .aryae-brand-root { /* ----------------------------------------- 1. COMPLETE COLOR PALETTE (As Provided) ----------------------------------------- */ --color-black-1: #231f20; /* Grounded Charcoal */ --color-dark-brown-1: #694a1d; /* Deep Bark/Espresso */ --color-light-brown-1: #a97c50; /* Warm Bronze/Wood */ --color-sand-1: #e6ddc9; /* Warm Sun Sand */ --color-sand-2: #E8E5D6; /* Linen Sand */ --color-sand-3: #ece5d9; /* Grounded Stone Sand */ --color-off-white-1: #fffef2; /* Luminous Soft Ivory */ /* Leaf-Inspired, Botanical & Sea Mist Greens */ --color-black-2: #384236; /* Forest Canopy (Deep Green-Black) */ --color-green-dim-3: #8fa391; /* Soft Sage (Muted Botanical) */ --color-green-soft: #f0f4f1; /* Leaf Haze (Airy Green-White Tint) */ --color-green-dim-1: #b5c2ba; /* Sea Mist (Quiet Grey-Green) */ --color-black-3: #27302d; /* Deep Tide (Ocean Teal-Black) */ --color-petal: #decbc0; /* Faded Rose Petal (Muted Floral Accent) */ /* ----------------------------------------- 2. LUXURY TONAL GRADIENTS (As Provided) ----------------------------------------- */ --colour-grad-1: linear-gradient(135deg, #be862c 30%, #694a1e 70%); --colour-grad-2: linear-gradient(180deg, #E8E5D6 0%, #ece5d9 100%); --colour-grad-3: linear-gradient(135deg, #be862c 0%, #e6ddc9 100%); --colour-grad-4: linear-gradient(135deg, #694a1d 0%, #231f20 100%); --colour-grad-5: linear-gradient(135deg, #231f20 0%, #694a1d 28%, #be862c 68%, #694a1e 100%); --colour-grad-6: linear-gradient(-135deg, #cfc6b7 0%, #d8cfbf 30%, #fffef2 68%, #E8E5D6 100%); --colour-grad-7: linear-gradient(145deg, #694a1d 0%, #a97c50 32%, #f4e7b8 70%, #D9C682 100%); --colour-grad-8: linear-gradient(135deg, #161314 0%, #231f20 30%, #4a403b 68%, #694a1d 100%); --colour-grad-9: linear-gradient(135deg, #1b241e 0%, #2c3b30 40%, #6e8274 75%, #f5f7f2 100%); --colour-grad-10: linear-gradient(135deg, #42342b 0%, #91715d 35%, #d9beaf 70%, #fffbf5 100%); --colour-grad-11: linear-gradient(135deg, #1e2b27 0%, #4f695e 45%, #9cae04 80%, #faf8f2 100%); --colour-grad-12: linear-gradient(135deg, #2c382b 0%, #5a6e55 40%, #a6b89e 75%, #6D8A65 100%); --colour-grad-13: linear-gradient(135deg, #2c382b 0%, #5a6e55 40%, #a6b89e 75%, #fffef0 100%); /* --- COMPANION TONAL BOX SHADOWS --- */ /* Shadow to match Deep Moss (Deep, cool green-tinted baseline anchor) */ --shadow-tonal-moss: 0 4px 20px rgba(27, 36, 30, 0.03), 0 16px 48px rgba(44, 59, 48, 0.04); /* Shadow to match Smoked Cedar (Warm, soft amber/clay undertone) */ --shadow-tonal-cedar: 0 6px 24px rgba(66, 52, 43, 0.03), 0 20px 50px rgba(145, 113, 93, 0.04); /* Shadow to match Coastal Drift (Muted, smoky slate-blue drop) */ --shadow-tonal-drift: 0 4px 22px rgba(30, 43, 39, 0.03), 0 18px 44px rgba(79, 105, 94, 0.04); /* Shadow to match Matcha Zen (Lightweight, organic leaf shadow lift) */ --shadow-tonal-matcha: 0 8px 30px rgba(44, 56, 43, 0.02), 0 24px 60px rgba(90, 110, 85, 0.03); /* --- PREMIUM AMBIENT BOX SHADOWS --- */ /* Style 1: The Invisible Lift (Ultra-subtle structure using Charcoal base) */ --shadow-minimal-soft: 0 4px 24px rgba(35, 31, 32, 0.02), 0 12px 40px rgba(35, 31, 32, 0.03); /* Style 2: Botanical Cushion (Has a faint, organic olive-tinted depth) */ --shadow-botanical-glow: 0 8px 32px rgba(56, 66, 54, 0.04), 0 24px 64px rgba(56, 66, 54, 0.03); /* Style 3: Warm Clay Ambient (Perfect for warming up cards or imagery) */ --shadow-earth-warm: 0 6px 20px rgba(105, 74, 29, 0.03), 0 20px 48px rgba(105, 74, 29, 0.04); /* Style 4: Deep Luxury Floating Frame (Stronger depth, great over dark sections) */ --shadow-luxury-tide: 0 10px 40px rgba(39, 48, 45, 0.06), 0 30px 80px rgba(39, 48, 45, 0.04); /* ----------------------------------------- 3. BORDERS & RADII ----------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 24px; --radius-pill: 9999px; /* ----------------------------------------- 4. ELEVATION, SHADOWS & BLURS ----------------------------------------- */ --shadow-sm: 0 2px 4px rgba(105, 74, 29, 0.05); --shadow-md: 0 4px 12px rgba(105, 74, 29, 0.08); --shadow-lg: 0 12px 24px rgba(105, 74, 29, 0.12); --blur-frosted: blur(12px); --bg-frosted: rgba(255, 254, 242, 0.7); } /* ========================================= EFFECTS & COMPONENTS ========================================= */ /* Reusable Utility: Turns any native background into gradient text */ .text-gradient { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: inline-block; /* Ensures the background wraps tight to the text */ } /* Frosted Panel: Mimics Aryaé premium frosted glass design */ .panel-frosted { background: var(--bg-frosted); backdrop-filter: var(--blur-frosted); -webkit-backdrop-filter: var(--blur-frosted); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-md); } /* Organic Canvas Container: Emulates unbleached linen/pouch texture aesthetics */ .panel-canvas { background-color: var(--color-sand-2); border: 1px solid var(--color-sand-3); border-radius: var(--radius-sm); padding: 2rem; position: relative; } /* Scent Profile & Detail Badges */ .aryae-badge { display: inline-block; padding: 0.25rem 1rem; font-size: 0.75rem; font-family: inherit; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; border-radius: var(--radius-pill); } .badge-botanical { background-color: var(--color-green-soft); color: var(--color-black-2); border: 1px solid rgba(143, 163, 145, 0.3); } .badge-earth { background-color: var(--color-sand-1); color: var(--color-dark-brown-1); } .badge-floral { background-color: var(--color-petal); color: var(--color-black-1); }