/* ALVANY tokens.css — self-contained, generated from design-system/tokens/*.css. DO NOT EDIT BY HAND. Regenerate from the DS if tokens change. Order: fonts (@import must lead) -> colors -> typography -> spacing -> base. */ /* ALVANY — Webfonts ------------------------------------------------------------------ The original wordmark "ALVANY" is set in TAN AEGEAN (a proprietary Canva display serif). It is not licensed for web distribution, so the system substitutes a high-contrast Didone that preserves the thin-and-thick, all-caps, engraved luxury feel. SUBSTITUTIONS (flagged for the client — supply licensed files to swap in): • Display / wordmark : TAN AEGEAN -> Playfair Display • UI / body : (none specified) -> Jost Fonts load from the Google Fonts CDN. For production, self-host the binaries and replace this @import with local @font-face rules. */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600&family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap'); /* ALVANY — Color tokens Palette: warm near-black ink · antique gold accent · cream/paper surfaces Aesthetic: quiet, editorial, luxury. Black + Gold on White/Cream. */ :root { /* ---- Base neutrals (warm) ---------------------------------- */ --white: #FFFFFF; --paper: #FDFBF7; /* primary page surface, warm off-white */ --cream: #F6F1E9; /* secondary surface / section fills */ --cream-deep: #EFE7DA; /* tonal panels, hover fills */ --ink-900: #14110E; /* near-black, warm — primary text & UI */ --ink-800: #262019; --ink-700: #3B342B; /* strong body */ --ink-500: #6B6156; /* secondary text */ --ink-400: #8C8377; /* muted / captions */ --ink-300: #B3AA9C; /* disabled text, placeholders */ --line: #E7E0D4; /* hairline borders on paper */ --line-strong:#D6CCBB; /* stronger dividers, input borders */ /* ---- Gold accent ------------------------------------------- */ --gold-700: #7A5C2E; /* AA-safe gold text on paper/white */ --gold-600: #96723A; --gold-500: #B08A4F; /* brand gold — accents, focus, hairlines */ --gold-400: #C4A06A; --gold-300: #DCC79E; /* soft gold fills, hover on dark */ --gold-100: #F1E7D3; /* faint gold wash */ /* ---- Metal accents (product finish/variant swatches) -------- */ --metal-silver-700: #6E6C66; /* AA-safe silver/pewter text on paper */ --metal-silver-500: #ACAAA2; /* silver finish swatch — mirrors gold-500 */ --metal-silver-300: #D4D2CB; /* soft silver fill, hover on dark */ --metal-silver-100: #F0EFEC; /* faint silver wash */ /* ---- Functional states ------------------------------------- */ --success-600:#3F6B4E; --success-500:#4F7A5B; /* muted sage */ --success-100:#E6EFE7; --error-600: #8F332B; --error-500: #A23B34; /* deep terracotta red — errors */ --error-100: #F5E3E0; --sale-600: #7C2A32; /* deep burgundy — sale price / markdown */ --sale-500: #9B333B; --info-500: #4A5A6B; /* ---- Semantic surface aliases ------------------------------ */ --surface-page: var(--paper); --surface-raised: var(--white); --surface-sunken: var(--cream); --surface-panel: var(--cream-deep); --surface-inverse: var(--ink-900); /* ---- Semantic text aliases --------------------------------- */ --text-strong: var(--ink-900); --text-body: var(--ink-700); --text-muted: var(--ink-500); --text-subtle: var(--ink-400); --text-disabled: var(--ink-300); --text-on-ink: var(--paper); --text-accent: var(--gold-700); /* ---- Semantic line aliases --------------------------------- */ --border-subtle: var(--line); --border-default: var(--line-strong); --border-strong: var(--ink-900); --border-accent: var(--gold-500); /* ---- Interactive ------------------------------------------- */ --focus-ring: var(--gold-500); --overlay-scrim: rgba(20, 17, 14, 0.44); /* modal / drawer backdrop */ --overlay-veil: rgba(20, 17, 14, 0.04); /* faint hover on paper */ /* AA contrast notes (WCAG 2.1): ink-900 on paper .......... 15.8:1 (AAA) ink-700 on paper .......... 9.4:1 (AAA) ink-500 on paper .......... 4.9:1 (AA normal) gold-700 on paper ......... 4.6:1 (AA normal / AAA large) gold-500 on paper ......... 2.9:1 (LARGE text & non-text UI only) paper on ink-900 .......... 15.8:1 (AAA) gold-300 on ink-900 ....... 9.1:1 (AAA) — accent text on dark sale-500 on paper ......... 5.6:1 (AA) metal-silver-700 on paper . 5.1:1 (AA) */ } /* ALVANY — Typography tokens Playfair Display (Didone, high-contrast) for display & wordmark Jost (geometric grotesk) for UI, nav, body & labels */ :root { /* ---- Families --------------------------------------------- */ --font-serif: 'Playfair Display', 'Times New Roman', Georgia, serif; --font-sans: 'Jost', 'Helvetica Neue', Arial, system-ui, sans-serif; --font-display: var(--font-serif); /* wordmark, hero, headings */ --font-ui: var(--font-sans); /* nav, buttons, body, labels */ /* ---- Weights ---------------------------------------------- */ --w-light: 300; /* @kind font */ --w-regular: 400; /* @kind font */ --w-medium: 500; /* @kind font */ --w-semibold: 600; /* @kind font */ --w-bold: 700; /* @kind font */ --w-black: 900; /* @kind font */ /* ---- Type scale (px) — modular ~1.25 ---------------------- */ --fs-display-xl: 84px; /* hero wordmark / oversized editorial */ --fs-display-l: 64px; --fs-display-m: 48px; --fs-h1: 38px; --fs-h2: 30px; --fs-h3: 23px; --fs-h4: 19px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 13px; --fs-micro: 11px; /* eyebrows, badges, legal */ /* ---- Line-heights ----------------------------------------- */ --lh-tight: 1.04; /* @kind other */ --lh-snug: 1.18; /* @kind other */ --lh-normal: 1.5; /* @kind other */ --lh-relaxed: 1.7; /* @kind other */ /* ---- Letter-spacing --------------------------------------- */ --ls-display: -0.01em; /* @kind other */ --ls-heading: 0em; /* @kind other */ --ls-body: 0.005em; /* @kind other */ --ls-wordmark:0.28em; /* @kind other */ --ls-eyebrow: 0.22em; /* @kind other */ --ls-caps: 0.14em; /* @kind other */ /* ---- Semantic role bundles (font-size / line-height) ------ */ --text-eyebrow-size: var(--fs-micro); --text-nav-size: var(--fs-caption); } /* Type role utility classes — optional helpers for cards & prototypes. Components reference the raw tokens above so they stay framework-free. */ .t-wordmark { font-family: var(--font-display); font-weight: var(--w-regular); letter-spacing: var(--ls-wordmark); text-transform: uppercase; line-height: 1; } .t-eyebrow { font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: var(--w-medium); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-accent); } .t-display { font-family: var(--font-display); font-weight: var(--w-medium); font-size: var(--fs-display-l); line-height: var(--lh-tight); letter-spacing: var(--ls-display); } .t-h1 { font-family: var(--font-display); font-weight: var(--w-medium); font-size: var(--fs-h1); line-height: var(--lh-snug); } .t-h2 { font-family: var(--font-display); font-weight: var(--w-medium); font-size: var(--fs-h2); line-height: var(--lh-snug); } .t-h3 { font-family: var(--font-display); font-weight: var(--w-regular); font-size: var(--fs-h3); line-height: var(--lh-snug); } .t-body { font-family: var(--font-ui); font-weight: var(--w-regular); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-body); } .t-body-sm { font-family: var(--font-ui); font-weight: var(--w-regular); font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--text-muted); } .t-caption { font-family: var(--font-ui); font-size: var(--fs-caption); color: var(--text-muted); } /* ALVANY — Spacing, sizing, radii (4px base grid) */ :root { /* ---- Spacing scale (strict 4px grid; compact editorial ramp) ---- Migrated from the old 8pt scale to a 4px grid: finer low end (adds a 20px step) + a compressed high end so sections read denser. Every value is a multiple of 4. */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 36px; --space-8: 48px; --space-9: 64px; --space-10: 88px; --space-11: 112px; /* ---- Radii (luxury = minimal rounding) -------------------- */ --radius-none: 0; --radius-xs: 2px; /* inputs, buttons, chips */ --radius-sm: 4px; /* cards, dropdowns */ --radius-md: 8px; /* modals, drawers */ --radius-pill: 999px; /* tags, counters, avatars */ /* ---- Layout / grid --------------------------------------- */ --container-max: 1280px; /* editorial max width (capped for LV-density) */ --container-wide: 1480px; /* full-bleed gallery / header + footer rows */ --container-text: 680px; /* long-form reading measure */ --gutter: 24px; /* desktop column gutter */ --gutter-mobile: 16px; --grid-columns: 12; /* @kind other */ /* Breakpoints (reference — used in media queries): xs <480 sm 480 md 768 lg 1024 xl 1280 2xl 1536 */ /* ---- Border widths --------------------------------------- */ --bw-hairline: 1px; /* @kind other */ --bw-strong: 1.5px; /* @kind other */ --bw-heavy: 2px; /* @kind other */ /* ---- Elevation (restrained — hairlines preferred) -------- */ --shadow-xs: 0 1px 2px rgba(20, 17, 14, 0.05); --shadow-sm: 0 2px 8px rgba(20, 17, 14, 0.06); --shadow-md: 0 10px 32px rgba(20, 17, 14, 0.08); --shadow-lg: 0 24px 64px rgba(20, 17, 14, 0.14); --shadow-focus: 0 0 0 3px rgba(176, 138, 79, 0.35); /* gold focus halo */ /* ---- Motion ---------------------------------------------- */ --dur-fast: 160ms; /* @kind other */ --dur-base: 240ms; /* @kind other */ --dur-slow: 400ms; /* @kind other */ --dur-reveal: 640ms; /* @kind other */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ /* Overlay motion — asymmetric by design. Panels ARRIVE slowly on an expo-out curve (a considered, decelerating settle; never a bounce) and LEAVE briskly on a quad-in curve, so dismissal feels immediate while arrival feels composed. */ --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --ease-exit: cubic-bezier(0.5, 0, 0.75, 0); /* @kind other */ --dur-enter: 460ms; /* @kind other */ --dur-exit: 260ms; /* @kind other */ /* ---- Z-index scale --------------------------------------- */ --z-base: 0; /* @kind other */ --z-raised: 10; /* @kind other */ --z-sticky: 100; /* @kind other */ --z-header: 200; /* @kind other */ --z-drawer: 900; /* @kind other */ --z-modal: 1000; /* @kind other */ --z-toast: 1100; /* @kind other */ /* ---- Control sizing -------------------------------------- */ --control-h-sm: 36px; --control-h: 48px; /* default button/input height */ --control-h-lg: 56px; --tap-min: 44px; /* minimum touch target */ } /* ALVANY — light base resets & shared primitives. Kept minimal; components style themselves via tokens. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Selection uses a soft gold wash */ ::selection { background: var(--gold-100); color: var(--ink-900); } /* Accessible focus — gold halo, never removed globally */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); } /* Editorial hairline rule */ .alv-rule { border: 0; border-top: var(--bw-hairline) solid var(--border-subtle); } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }