/* ========================================================================== El Noa Noa Supermarket — DESIGN TOKENS -------------------------------------------------------------------------- The single source of truth for colour, type, space, radius, elevation, motion and layout. Components never hard-code a raw value: they reference the semantic tokens declared here. Layer 1 primitives (--blue-600, --gray-200) raw palette, no meaning Layer 2 semantics (--color-primary, --color-text) role, used by components Layer 3 components (--btn-height, --card-radius) component-scoped knobs Only layer 2 and 3 may be used inside components.css / layout.css. ========================================================================== */ :root { /* ====================================================================== 1. PRIMITIVES — BRAND PALETTE Noa Noa Blue #133A88 and Noa Noa Yellow #FDC300 are the approved brand colours taken from the logo. The surrounding steps are tints and shades of those two hues, generated for UI states only. ====================================================================== */ --blue-50: #EEF2FB; --blue-100: #D8E1F4; --blue-200: #B2C3E7; --blue-300: #849FD6; --blue-400: #4E71BC; --blue-500: #2A4FA3; --blue-600: #133A88; /* NOA NOA BLUE — brand primary */ --blue-700: #102F6E; --blue-800: #0C2455; --blue-900: #081A3E; --blue-950: #05122B; --yellow-50: #FFFBEB; --yellow-100: #FFF3C4; --yellow-200: #FFE68A; --yellow-300: #FFD84D; --yellow-400: #FDC300; /* NOA NOA YELLOW — brand accent */ --yellow-500: #E0AB00; --yellow-600: #B88B00; --yellow-700: #8C6900; --yellow-800: #614900; /* Neutrals. --gray-50 is the approved light background (#F7F8FA) and --gray-800 the approved dark text (#1F2937). */ --gray-0: #FFFFFF; --gray-25: #FCFDFE; --gray-50: #F7F8FA; --gray-100: #EFF1F5; --gray-200: #E2E6ED; --gray-300: #CBD2DD; /* --gray-400 is the boundary colour of interactive controls, so it is dark enough to clear the 3:1 non-text contrast requirement on both white and the page background (3.25:1 / 3.06:1). */ --gray-400: #858FA4; /* --gray-500 is muted body text and must clear 4.5:1 on the page background, not only on white (4.92:1 / 5.23:1). */ --gray-500: #646D7B; --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937; --gray-900: #111827; --black: #000000; /* Functional hues. Green and red are UI signal colours only: they never become brand colours and never dominate a layout. */ --green-50: #ECFDF3; --green-100: #D1FADF; --green-600: #067647; --green-700: #05603A; --red-50: #FEF3F2; --red-100: #FEE4E2; --red-600: #C0261C; /* sale / danger */ --red-700: #9A1C14; --amber-50: #FFFAEB; --amber-100: #FEF0C7; --amber-600: #B54708; --amber-700: #93370D; /* ====================================================================== 2. SEMANTIC COLOUR ROLES ====================================================================== */ --color-primary: var(--blue-600); --color-primary-hover: var(--blue-700); --color-primary-active: var(--blue-800); --color-primary-subtle: var(--blue-50); --color-primary-border: var(--blue-200); --color-on-primary: var(--gray-0); --color-accent: var(--yellow-400); --color-accent-hover: var(--yellow-500); --color-accent-active: var(--yellow-600); --color-accent-subtle: var(--yellow-50); /* Dark blue on yellow, exactly as the logo lockup uses it. */ --color-on-accent: var(--blue-800); --color-bg: var(--gray-50); --color-surface: var(--gray-0); --color-surface-alt: var(--gray-50); --color-surface-sunken: var(--gray-100); --color-surface-inverse: var(--blue-800); --color-text: var(--gray-800); --color-text-strong: var(--gray-900); --color-text-muted: var(--gray-500); --color-text-subtle: var(--gray-400); --color-text-inverse: var(--gray-0); --color-text-on-inverse-muted: var(--blue-100); /* --color-border is decorative: card edges and separators. --color-border-strong is the boundary of an interactive control (input, select, chip, pagination) and therefore meets 3:1 against its background. */ --color-border: var(--gray-200); --color-border-strong: var(--gray-400); --color-border-inverse: rgba(255, 255, 255, 0.16); --color-link: var(--blue-600); --color-link-hover: var(--blue-700); --color-success: var(--green-600); --color-success-bg: var(--green-50); --color-success-border: var(--green-100); --color-danger: var(--red-600); --color-danger-bg: var(--red-50); --color-danger-border: var(--red-100); --color-warning: var(--amber-600); --color-warning-bg: var(--amber-50); --color-warning-border: var(--amber-100); --color-info: var(--blue-600); --color-info-bg: var(--blue-50); --color-info-border: var(--blue-100); /* Commerce-specific roles. Sale pricing is red, as in the approved design. */ --color-price: var(--gray-900); --color-price-sale: var(--red-600); --color-price-compare: var(--gray-400); --color-focus-ring: var(--blue-400); --color-overlay: rgba(8, 26, 62, 0.55); /* ====================================================================== 3. TYPOGRAPHY Families are indirected through --font-heading / --font-body so the provider can move from Google Fonts to self-hosted WOFF2 by editing the font stack and the @font-face block alone. No component markup or class changes when that happens. ====================================================================== */ --font-heading: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* Step scale. Body sizes are fixed; display sizes are fluid so headings shrink on small screens without a media query. */ --text-2xs: 0.6875rem; /* 11px — badges, legal */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px — body default */ --text-lg: 1.125rem; /* 18px — lead */ --text-xl: 1.25rem; /* 20px */ --text-2xl: clamp(1.375rem, 1.28rem + 0.42vw, 1.5rem); --text-3xl: clamp(1.5rem, 1.33rem + 0.76vw, 1.875rem); --text-4xl: clamp(1.75rem, 1.45rem + 1.30vw, 2.25rem); --text-5xl: clamp(2rem, 1.48rem + 2.30vw, 3rem); --text-6xl: clamp(2.25rem, 1.45rem + 3.50vw, 3.75rem); --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tighter: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.06em; /* ====================================================================== 4. SPACE — 4px base unit, 8px rhythm ====================================================================== */ --space-0: 0; --space-px: 1px; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ /* Vertical rhythm between major page sections: 48px mobile, 80px desktop. */ --space-section: clamp(2.25rem, 1.4rem + 3.5vw, 3.5rem); /* ====================================================================== 5. RADIUS, BORDER, ELEVATION Depth comes from tonal layers and low-contrast outlines. Shadows are tinted with brand blue rather than neutral black so cards stay "airy". ====================================================================== */ --radius-xs: 4px; --radius-sm: 6px; --radius: 8px; /* buttons, inputs */ --radius-md: 12px; --radius-lg: 16px; /* cards */ --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; --border-width: 1px; --border-width-thick: 2px; --shadow-xs: 0 1px 2px rgba(8, 26, 62, 0.05); --shadow-sm: 0 1px 3px rgba(8, 26, 62, 0.07), 0 1px 2px rgba(8, 26, 62, 0.04); --shadow-md: 0 4px 12px rgba(8, 26, 62, 0.08), 0 2px 4px rgba(8, 26, 62, 0.04); --shadow-lg: 0 12px 28px rgba(8, 26, 62, 0.12), 0 4px 8px rgba(8, 26, 62, 0.05); --shadow-xl: 0 24px 48px rgba(8, 26, 62, 0.16); --shadow-focus: 0 0 0 3px rgba(19, 58, 136, 0.28); --shadow-focus-danger: 0 0 0 3px rgba(192, 38, 28, 0.25); /* ====================================================================== 6. LAYOUT Breakpoints are documented here for reference. CSS cannot use a custom property inside a media query, so the literal values below are repeated in layout.css and must be changed in both places together. sm 480px large phone md 768px tablet lg 1024px small laptop xl 1280px desktop 2xl 1440px large desktop ====================================================================== */ --container-max: 1280px; --container-wide: 1440px; --container-narrow: 768px; --container-prose: 65ch; --container-gutter: clamp(1rem, 0.6rem + 1.8vw, 2.5rem); --grid-gutter: clamp(1rem, 0.7rem + 1.2vw, 1.5rem); /* Minimum comfortable tap target on touch devices. */ --tap-target: 44px; /* ====================================================================== 7. MOTION ====================================================================== */ --duration-fast: 120ms; --duration: 200ms; --duration-slow: 320ms; --ease: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1); --transition-colors: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); /* ====================================================================== 8. Z-INDEX SCALE ====================================================================== */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 1020; --z-drawer: 1030; --z-overlay: 1040; --z-modal: 1050; --z-toast: 1060; --z-tooltip: 1070; /* ====================================================================== 9. MEDIA / IMAGE SLOTS Aspect ratios are fixed per slot so a page never reflows while images load, and so real photography can be dropped in later without any layout change. Cropping is object-fit: cover with a focal point that can be overridden per image via --media-position. ====================================================================== */ --ratio-square: 1 / 1; /* product thumbnails, category tiles */ --ratio-product: 4 / 5; /* product card portrait crop */ --ratio-card: 4 / 3; /* content and recipe cards */ --ratio-wide: 16 / 9; /* blog headers, store photos */ --ratio-banner: 2 / 1; /* promotional banners */ --ratio-hero: 21 / 9; /* desktop hero composition */ --ratio-portrait: 3 / 4; /* editorial portrait */ --media-position: 50% 50%; /* default focal point for cropping */ --media-placeholder-bg: var(--blue-50); --media-placeholder-fg: var(--blue-300); /* The meander texture behind a placeholder glyph. Kept low so the placeholder reads as a quiet surface, not as decoration. */ --media-placeholder-pattern-opacity: 0.16; /* ====================================================================== 10. COMPONENT KNOBS ====================================================================== */ --btn-height-sm: 36px; --btn-height: 44px; --btn-height-lg: 52px; --btn-radius: var(--radius); --btn-font: var(--font-heading); --input-height: 44px; --input-radius: var(--radius); --input-bg: var(--gray-0); --card-radius: var(--radius-lg); --card-bg: var(--color-surface); --card-border: var(--color-border); --header-height: 72px; /* reserved by Phase 3 */ --bottom-nav-height: 60px; /* reserved by Phase 3 */ /* Greek-key meander motif from the logo. Used sparingly: section dividers, footer bands, promotional edges. Never as a full-page background. */ --pattern-meander: url("/assets/images/pattern-meander.svg"); --pattern-size: 48px 24px; --pattern-opacity: 0.14; } /* Larger radii and a taller header once there is room for them. */ @media (min-width: 1024px) { :root { --header-height: 88px; } } /* Honour the operating-system reduced-motion preference at token level so every component inherits it without writing its own media query. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration: 1ms; --duration-slow: 1ms; } }