/** * Juye design tokens. * * The single source of truth for colour, type, space, shape, depth and motion. * Nothing else in this theme may declare a raw hex, px, shadow or easing curve * -- every rule reads from here, so the whole store can be retuned from one * file. * * Palette: deep espresso base, antique brass accent, bone neutrals. * Type: Fraunces (display) + Manrope (body/UI), both variable. * * Every colour pair below was measured, not assumed. Ratios are noted inline. * ------------------------------------------------------------------------- */ :root { /* ====================================================================== 1. COLOUR -- raw ramp Not for direct use in components. Use the semantic tokens in 1b. ====================================================================== */ /* Espresso: the brand spine. Dark, warm, calm -- never black. */ --espresso-900: #1B110E; --espresso-800: #2B1D18; --espresso-600: #4A362D; --espresso-400: #6B5E54; /* Antique brass: the one metallic. Used sparingly -- price, sale tags, hover underlines, icons. Never as a section background. */ --brass-300: #E2CFA4; --brass-400: #C8A663; --brass-500: #B08D4F; --brass-700: #836330; /* Bone and sand. Never pure #FFFFFF across a whole page. */ --bone-50: #FFFDF9; --bone-100: #F7F3EC; --bone-200: #EFE8DC; --bone-300: #E4DACB; --clay-500: #9C4A2F; /* sale / markdown */ --leaf-600: #3E6B4F; /* success / in stock */ /* ====================================================================== 1b. COLOUR -- semantic. These are what components use. Rule: at most three colours in any one viewport -- neutral, brand, accent. The accent earns attention precisely because it is rare. ====================================================================== */ --c-bg: var(--bone-100); /* page ground */ --c-surface: var(--bone-50); /* cards, inputs, anything raised */ --c-surface-alt: var(--bone-200); /* tinted media wells, quiet panels */ --c-ink: var(--espresso-800); /* body copy 14.70:1 on --c-bg */ --c-ink-muted: var(--espresso-400); /* secondary 5.66:1 on --c-bg */ --c-brand: var(--espresso-800); /* headers, footers, dark sections */ --c-brand-deep: var(--espresso-900); /* deepest ground */ --c-brand-mid: var(--espresso-600); /* dividers and icons on dark */ --c-accent: var(--brass-400); /* primary action. Ink on it: 7.04:1 */ --c-accent-hover:var(--brass-500); /* hover state. Ink on it: 5.24:1 */ --c-accent-ink: var(--brass-700); /* brass AS TEXT on light: 5.01:1 */ --c-accent-soft: var(--brass-300); /* tints and quiet fills */ --c-border: var(--bone-300); --c-overlay-light: rgba(242, 234, 220, .12); /* wash over dark ground */ --c-border-dark: rgba(242, 234, 220, .18); /* hairlines on dark ground */ --c-on-dark: #F2EADC; /* text on brand 13.61:1 */ --c-on-dark-mut: #BDAE9A; /* secondary on brand 7.50:1 */ --c-on-accent: var(--espresso-800); /* text on brass 7.04:1 */ --c-success: var(--leaf-600); /* white on it 6.14:1 */ /* Channel triplets. CSS cannot pull the channels back out of a hex, so any rule needing a translucent wash composes it from these instead of hard-coding the colour: rgba(var(--c-brand-rgb), .12). */ --c-brand-rgb: 43, 29, 24; --c-brand-deep-rgb: 27, 17, 14; --c-brand-mid-rgb: 74, 54, 45; --c-accent-rgb: 200, 166, 99; --c-surface-rgb: 255, 253, 249; --c-on-dark-rgb: 242, 234, 220; --c-highlight-rgb: 255, 255, 255; /* specular light only, never a fill */ --c-sale: var(--clay-500); /* white on it 6.12:1 */ /* ====================================================================== 2. TYPE Two families, both variable fonts, so the latin subset is ONE file each -- two files in total against a budget of four. The display face was Bodoni Moda, and it was the wrong call. A didone's hairlines thin out badly below about 24px, and the wordmark sits at 1.7rem -- 27px -- so the brand name itself read as half-erased on an ordinary screen. Fraunces replaces it: a variable old-style serif with even stroke weight, so it holds together at the wordmark, at a price, and in a heading, while still looking made by hand rather than generated. Body copy, labels and badges stay Manrope. Only the opsz and wght axes are requested. Fraunces also ships SOFT and WONK; do not reach for them through font-variation-settings without adding them to the Google Fonts URL first, because that property drops every axis it does not name back to its default and would quietly undo the weights set all over this stylesheet. ====================================================================== */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Urdu is declared but deliberately NOT loaded: no Urdu content exists on the site yet, and a Nastaliq face is a heavy download to ship for nothing. Add the @font-face when Urdu actually lands. Nastaliq needs far more leading than Latin, hence its own line-height below. */ --font-urdu: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif; /* Modular scale, mobile-first, fluid from 360px to 1440px with no per-element media queries. Floor is 14px -- nothing on this site, including badges and the footer, may go below it. */ --fs-xs: clamp(0.875rem, 0.850rem + 0.12vw, 0.9375rem); /* 14 -> 15 */ --fs-sm: clamp(0.9375rem, 0.910rem + 0.13vw, 1rem); /* 15 -> 16 */ --fs-base: clamp(1rem, 0.970rem + 0.15vw, 1.0625rem); /* 16 -> 17 */ --fs-md: clamp(1.125rem, 1.070rem + 0.25vw, 1.25rem); /* 18 -> 20 */ --fs-lg: clamp(1.3125rem, 1.220rem + 0.42vw, 1.5625rem); /* 21 -> 25 */ --fs-xl: clamp(1.5625rem, 1.420rem + 0.65vw, 2.0625rem); /* 25 -> 33 */ --fs-2xl: clamp(1.875rem, 1.620rem + 1.14vw, 2.75rem); /* 30 -> 44 */ --fs-3xl: clamp(2.25rem, 1.880rem + 1.65vw, 3.625rem); /* 36 -> 58 */ --fs-display: clamp(2.625rem, 1.970rem + 2.90vw, 4.75rem); /* 42 -> 76 */ --lh-display: 1.08; /* display headings, tight */ --lh-heading: 1.18; --lh-tight: 1.35; --lh-body: 1.6; /* inside the 1.5-1.7 band */ --lh-urdu: 2.1; /* Nastaliq sits far apart or it collides */ --track-display: -0.022em; /* big type needs pulling in */ --track-heading: -0.015em; --track-body: 0; --track-label: 0.14em; /* small caps labels open up */ --measure: 68ch; /* 60-75 characters */ /* ====================================================================== 3. SPACE -- one 4/8 scale. Nothing off-scale. ====================================================================== */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 3rem; /* 48 */ --sp-8: 4rem; /* 64 */ --sp-9: 6rem; /* 96 */ --sp-10: 8rem; /* 128 */ /* Whitespace is the single biggest premium lever, so the section rhythm and page gutter are tokens too. */ --sp-section: clamp(4rem, 8vw, 8rem); --gutter: clamp(1.25rem, 4vw, 2.75rem); --maxw: 1280px; /* ====================================================================== 4. SHAPE ====================================================================== */ --r-sm: 4px; --r-md: 10px; --r-lg: 20px; --r-pill: 999px; /* Minimum touch target. Mid-range Android in portrait is the design target, so nothing interactive goes below this. */ --tap-min: 44px; /* ====================================================================== 5. DEPTH -- two levels only. Premium is restrained. ====================================================================== */ --shadow-rest: 0 1px 2px rgba(27, 17, 14, .05), 0 2px 8px rgba(27, 17, 14, .04); --shadow-raised: 0 2px 6px rgba(27, 17, 14, .06), 0 16px 32px rgba(27, 17, 14, .10); /* ====================================================================== 6. MOTION -- 150-250ms, ease-out, and nothing longer for UI. ====================================================================== */ --t-fast: 150ms; --t-base: 200ms; --t-slow: 250ms; --ease: cubic-bezier(.2, .7, .3, 1); /* Reveals are allowed to run longer than UI feedback, but only just. */ --reveal-t: 620ms; --reveal-y: 16px; --stagger: 70ms; --ease-out: cubic-bezier(.16, .84, .44, 1); } /* ========================================================================== 7. BRIDGE -- temporary layout.css, shop.css and motion.css still speak the old --juye-* names. Rather than rewrite all three in the same phase that introduces the tokens, those names are re-pointed at the semantic tokens above. The whole store therefore adopts the new palette and type immediately, with no file left holding a raw hex. Each later phase migrates its own file to the --c-* / --fs-* names and deletes the lines it no longer needs. This block should be empty by the end of the rebuild. ========================================================================== */ :root { --juye-forest: var(--c-brand); --juye-forest-dk: var(--c-brand-deep); --juye-tea: var(--c-brand-mid); --juye-cardamom: var(--c-accent); --juye-cardamom-soft: var(--c-accent-soft); --juye-cream: var(--c-bg); --juye-milk: var(--c-surface); --juye-saffron: var(--c-accent); --juye-saffron-dk: var(--c-accent-hover); --juye-terra: var(--c-sale); --juye-terra-soft: var(--c-surface-alt); --juye-terra-ink: var(--c-accent-ink); --juye-ink: var(--c-ink); --juye-ink-soft: var(--c-ink-muted); --juye-ink-faint: var(--c-ink-muted); --juye-line: var(--c-border); --juye-line-dark: var(--c-border-dark); --juye-display: var(--font-display); --juye-body: var(--font-body); --juye-fs-hero: var(--fs-display); --juye-fs-h1: var(--fs-3xl); --juye-fs-h2: var(--fs-2xl); --juye-fs-h3: var(--fs-md); --juye-gutter: var(--gutter); --juye-sec-y: var(--sp-section); --juye-radius: var(--r-lg); --juye-radius-sm: var(--r-md); --juye-radius-pill: var(--r-pill); --juye-shadow-sm: var(--shadow-rest); --juye-shadow: var(--shadow-rest); --juye-shadow-lg: var(--shadow-raised); --juye-ease: var(--ease); --juye-ease-out: var(--ease-out); --juye-t: var(--t-base); --juye-t-slow: var(--t-slow); --juye-reveal-t: var(--reveal-t); --juye-reveal-y: var(--reveal-y); --juye-stagger: var(--stagger); }