/* * Urban Kingdom design tokens. * * Single source of truth for color, type, spacing, radius, and elevation. * Nothing anywhere else in the codebase declares a raw color, font family, * radius, or shadow. Everything references a custom property from this file, * so re-skinning the entire site is a single file swap. * * Brand values supplied by the operator from the current Elementor theme. * Neutral, status, spacing, and sizing values are derived and may be tuned. */ :root { /* ------------------------------------------------------------------ */ /* Brand (authoritative, do not change without the operator's say-so) */ /* ------------------------------------------------------------------ */ --uk-color-primary: #0F2934; /* deep teal: header, buttons, headings */ --uk-color-secondary: #C2CCC5; /* sage: main page background */ --uk-color-accent: #DAC09C; /* sand: highlights, badges, ornament */ --uk-color-ink: #313131; /* body text */ /* Primary ramp, derived. Use for hover, active, and borders. */ --uk-color-primary-900: #081820; --uk-color-primary-800: #0F2934; /* = primary */ --uk-color-primary-700: #17414F; --uk-color-primary-600: #215A6B; --uk-color-primary-400: #5A8593; --uk-color-primary-200: #A9C0C8; --uk-color-primary-050: #E7EEF0; /* Secondary ramp, derived. */ --uk-color-secondary-400: #9BAAA1; --uk-color-secondary-300: #B0BCB4; --uk-color-secondary-200: #C2CCC5; /* = secondary */ --uk-color-secondary-100: #D7DED9; --uk-color-secondary-050: #EDF0EE; /* Accent ramp, derived. */ --uk-color-accent-600: #B08F5F; --uk-color-accent-500: #C7A87D; --uk-color-accent-400: #DAC09C; /* = accent */ --uk-color-accent-200: #EBDCC5; --uk-color-accent-050: #F7F1E7; /* ------------------------------------------------------------------ */ /* Semantic surfaces and text */ /* ------------------------------------------------------------------ */ /* Default page background is sage. Shopping pages override it below. */ --uk-color-bg: var(--uk-color-secondary); /* page */ --uk-color-bg-alt: var(--uk-color-secondary-100); --uk-color-surface: #FFFFFF; /* cards, panels */ --uk-color-surface-sunken: var(--uk-color-secondary-050); --uk-color-surface-inverse: var(--uk-color-primary); /* Neutral backdrop behind product photos in the store. */ --uk-color-photo-bg: #F3F5F4; /* The designer: the outline and handles on the selected piece. */ --uk-color-selection: #2F9FE0; --uk-color-border: rgba(15, 41, 52, 0.16); --uk-color-border-strong: rgba(15, 41, 52, 0.32); --uk-color-divider: rgba(15, 41, 52, 0.10); --uk-color-text: var(--uk-color-ink); --uk-color-text-heading: var(--uk-color-primary); --uk-color-text-muted: #5C6B70; --uk-color-text-inverse: #FFFFFF; --uk-color-text-on-accent: var(--uk-color-primary); /* never white on accent */ --uk-color-link: var(--uk-color-primary-700); --uk-color-link-hover: var(--uk-color-primary); --uk-color-focus-ring: var(--uk-color-primary-600); /* ------------------------------------------------------------------ */ /* Status */ /* ------------------------------------------------------------------ */ --uk-color-success: #1E6B4C; --uk-color-success-bg: #E4F0EA; --uk-color-warning: #8A5A16; --uk-color-warning-bg: #FAEEDC; --uk-color-danger: #A32A22; --uk-color-danger-bg: #F8E5E3; --uk-color-info: var(--uk-color-primary-700); --uk-color-info-bg: var(--uk-color-primary-050); /* ------------------------------------------------------------------ */ /* Typography */ /* ------------------------------------------------------------------ */ --uk-font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --uk-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --uk-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* Montserrat is used at Black. Never render a heading lighter than 800. */ --uk-font-weight-heading: 900; --uk-font-weight-subheading: 800; --uk-font-weight-regular: 400; --uk-font-weight-medium: 500; --uk-font-weight-semibold: 600; --uk-font-weight-bold: 700; --uk-heading-letter-spacing: -0.01em; /* Montserrat Black tightens well */ --uk-heading-line-height: 1.12; --uk-heading-transform: none; --uk-body-line-height: 1.6; --uk-text-xs: 0.75rem; --uk-text-sm: 0.875rem; --uk-text-base: 1rem; --uk-text-lg: 1.125rem; --uk-text-xl: 1.375rem; --uk-text-2xl: 1.75rem; --uk-text-3xl: 2.25rem; --uk-text-4xl: 3rem; --uk-text-5xl: 3.75rem; /* ------------------------------------------------------------------ */ /* Spacing */ /* ------------------------------------------------------------------ */ --uk-space-1: 0.25rem; --uk-space-2: 0.5rem; --uk-space-3: 0.75rem; --uk-space-4: 1rem; --uk-space-5: 1.5rem; --uk-space-6: 2rem; --uk-space-7: 3rem; --uk-space-8: 4rem; --uk-space-9: 6rem; --uk-section-padding-y: var(--uk-space-8); --uk-section-padding-y-lg: var(--uk-space-9); /* ------------------------------------------------------------------ */ /* Layout */ /* ------------------------------------------------------------------ */ --uk-container-max: 1280px; --uk-container-narrow: 880px; --uk-gutter: var(--uk-space-4); --uk-header-height: 84px; --uk-header-height-compact: 64px; /* ------------------------------------------------------------------ */ /* Radius and elevation */ /* ------------------------------------------------------------------ */ --uk-radius-sm: 4px; --uk-radius-md: 8px; --uk-radius-lg: 16px; --uk-radius-pill: 999px; --uk-shadow-sm: 0 1px 2px rgba(15, 41, 52, 0.08); --uk-shadow-md: 0 4px 14px rgba(15, 41, 52, 0.10); --uk-shadow-lg: 0 14px 38px rgba(15, 41, 52, 0.14); /* ------------------------------------------------------------------ */ /* Buttons */ /* ------------------------------------------------------------------ */ --uk-btn-radius: var(--uk-radius-sm); --uk-btn-padding-y: 0.8125rem; --uk-btn-padding-x: 1.75rem; --uk-btn-font: var(--uk-font-heading); --uk-btn-font-weight: 800; --uk-btn-font-size: var(--uk-text-sm); --uk-btn-letter-spacing: 0.04em; --uk-btn-text-transform: uppercase; --uk-btn-primary-bg: var(--uk-color-primary); --uk-btn-primary-text: #FFFFFF; --uk-btn-primary-bg-hover: var(--uk-color-primary-700); --uk-btn-accent-bg: var(--uk-color-accent); --uk-btn-accent-text: var(--uk-color-primary); /* mandatory, see note */ --uk-btn-accent-bg-hover: var(--uk-color-accent-500); --uk-btn-ghost-border: var(--uk-color-primary); --uk-btn-ghost-text: var(--uk-color-primary); --uk-btn-ghost-bg-hover: var(--uk-color-primary); --uk-btn-ghost-text-hover: #FFFFFF; /* ------------------------------------------------------------------ */ /* Forms */ /* ------------------------------------------------------------------ */ --uk-input-bg: #FFFFFF; --uk-input-border: var(--uk-color-border-strong); --uk-input-border-focus: var(--uk-color-primary); --uk-input-radius: var(--uk-radius-sm); --uk-input-padding-y: 0.625rem; --uk-input-padding-x: 0.875rem; /* ------------------------------------------------------------------ */ /* Motion */ /* ------------------------------------------------------------------ */ --uk-transition-fast: 120ms ease; --uk-transition-base: 200ms ease; /* Breakpoints, documented. Media queries use literals. sm 480px | md 768px | lg 1024px | xl 1280px */ } /* ==================================================================== */ /* PAGE BACKGROUND CONTEXTS */ /* ==================================================================== */ /* * Two contexts. The layout sets `data-surface` on . Nothing else * changes: the same components work in both because they read the same * tokens. * * data-surface="brand" -> sage background. Marketing pages: * home, about, bulk orders, request a quote, * terms, privacy, 404. * * data-surface="shop" -> white background. Catalog and transactional * pages: category and listing pages, product * detail, search results, cart, checkout, * account, designer, admin. * * Default when the attribute is absent is "brand". */ body[data-surface="shop"] { --uk-color-bg: #FFFFFF; --uk-color-bg-alt: var(--uk-color-secondary-050); --uk-color-surface: #FFFFFF; --uk-color-surface-sunken: var(--uk-color-secondary-050); /* On a white page, cards need a border rather than a background shift. */ --uk-card-bg: #FFFFFF; --uk-card-border: var(--uk-color-border); --uk-card-shadow: var(--uk-shadow-sm); } body[data-surface="brand"] { /* On sage, cards lift off the page with white and need no border. */ --uk-card-bg: #FFFFFF; --uk-card-border: transparent; --uk-card-shadow: var(--uk-shadow-md); } /* * CONTRAST RULES. These are measured, not opinions. Do not violate them. * * primary bg + white text .................. 15.14:1 AAA * primary bg + accent text .................. 8.65:1 AAA * secondary bg + ink text ................... 7.89:1 AAA * secondary bg + primary text ............... 9.18:1 AAA * white surface + primary text ............. 15.14:1 AAA * accent bg + primary text .................. 8.65:1 AAA * * accent bg + WHITE text .................... 1.75:1 FAILS. Never do this. * accent on sage bg ......................... 1.06:1 Invisible. * white on sage bg .......................... 1.65:1 Invisible. * * THE SAGE BACKGROUND RULE, stated by the operator and confirmed by * measurement: on the sage background, use DARK colors only. Never white, * never the sand accent. That covers text, icons, rules, borders, filled * shapes, and any large surface. * * Permitted on sage: --uk-color-primary and its 600 to 900 steps, and * --uk-color-ink. Nothing lighter. * * The one deliberate exception is a white card or panel, which is a * distinct raised surface rather than a color used on the background. Once * inside that card, the surface is white and the normal white-page rules * apply. * * Text on the accent is ALWAYS --uk-color-primary, never white. */ /* Font loading: Montserrat 800/900 only (do not add more without a reason). Figtree loaded as a variable font, full weight range 300-900, roman and italic (per operator direction — supersedes the original Figtree 400/500/600/700-only note). */