/** * ============================================================ * CASA DO CHEF J — Design Tokens * Version: 1.0 * Generated: 2026-04-13 * Author: studiomosaiko * ============================================================ * * ARCHITECTURE — Three-layer token system * Inspired by Material Design 3, IBM Carbon, GitHub Primer, * and W3C DTCG (Design Token Community Group) spec. * * Layer 1 · PRIMITIVES * Raw values with no semantic meaning. Named by value. * Never referenced directly in component code. * Prefix: --primitive-* * * Layer 2 · SEMANTIC * Role-based aliases that point to primitives. * Name by role/intent, not by value. * Prefix: --color-*, --space-*, --type-*, --shadow-* * These ARE the tokens developers use in CSS. * * Layer 3 · COMPONENT * Component-scoped tokens that point to semantic tokens. * Allow per-component overrides without breaking the system. * Prefix: --[component]-* * * DARK MODE * Overrides semantic tokens only. Primitives never change. * Applied via [data-theme="dark"] or .dark class on . * * FONT LOADING * @import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap" * * BRAND IDENTITY * Casa do Chef J — restaurante íntimo, 20 lugares * Ipanema, Rio de Janeiro · desde 1986 * Cozinha brasileira contemporânea com alma carioca * * DESIGN PRINCIPLES * 1. Editorial gastronômico — tipografia lidera, ornamento serve * 2. Intimidade — 20 lugares, cada detalhe conta * 3. Fotos sempre preto e branco — nunca coloridas * 4. Botões sem border-radius — estilo editorial flat * 5. Grid base 8px — todos os espaçamentos múltiplos de 8px * 6. Verde como acento principal — nunca dourado como primário * ============================================================ */ /* ============================================================ * LAYER 1 — PRIMITIVES * Raw, atomic values. The full palette vocabulary. * Do NOT use these directly in components — use semantics. * ============================================================ */ :root { /* ---------------------------------------------------------- * PRIMITIVE · GREEN SCALE * Primary brand accent. Derived from #4AB133. * 50 = lightest tint · 900 = deepest shade * ---------------------------------------------------------- */ --primitive-green-50: #f0f9ec; /* near-white tint, backgrounds */ --primitive-green-100: #d9f0d0; /* very light, subtle fills */ --primitive-green-200: #b3e3a2; /* light tint */ --primitive-green-300: #8dd575; /* soft, accessible on dark */ --primitive-green-400: #6fcc4b; /* verde-claro, secondary accent */ --primitive-green-500: #4ab133; /* BRAND PRIMARY — verde #4AB133 */ --primitive-green-600: #3d9429; /* darker, hover states */ --primitive-green-700: #317520; /* strong, accessible */ --primitive-green-800: #295a1f; /* verde-escuro, deep */ --primitive-green-900: #1c3f16; /* near-black, text on light */ /* ---------------------------------------------------------- * PRIMITIVE · NEUTRAL SCALE * Built from brand charcoal #1A1A1A and cream #F5F0E8. * Warm-toned neutrals — not cold gray. * ---------------------------------------------------------- */ --primitive-neutral-0: #ffffff; /* pure white, specular */ --primitive-neutral-50: #f5f0e8; /* cream — brand warm white */ --primitive-neutral-100: #ede7da; /* slightly darker cream */ --primitive-neutral-150: #e8e0d4; /* cream-dark */ --primitive-neutral-200: #ddd5c6; /* warm light gray */ --primitive-neutral-300: #cac1b2; /* medium-light */ --primitive-neutral-400: #b0a699; /* mid warm gray */ --primitive-neutral-500: #8a8178; /* warm-gray — brand muted */ --primitive-neutral-600: #6b6560; /* darker muted */ --primitive-neutral-700: #4a4540; /* near charcoal */ --primitive-neutral-800: #2a2a2a; /* charcoal-light */ --primitive-neutral-900: #1a1a1a; /* BRAND CHARCOAL */ --primitive-neutral-950: #0d0d0d; /* near-black */ --primitive-neutral-1000: #000000; /* pure black */ /* ---------------------------------------------------------- * PRIMITIVE · WINE SCALE * Derived from #722F37. Used for danger, error, close. * Warm burgundy — fits the restaurant context. * ---------------------------------------------------------- */ --primitive-wine-100: #f5dde0; /* very light, error background */ --primitive-wine-200: #e8b3b9; /* light, subtle */ --primitive-wine-300: #c97580; /* medium tint */ --primitive-wine-400: #a84d57; /* accessible */ --primitive-wine-500: #722f37; /* BRAND WINE */ --primitive-wine-600: #5c2028; /* darker */ --primitive-wine-700: #45151e; /* deep */ --primitive-wine-800: #2e0b11; /* near-black */ /* ---------------------------------------------------------- * PRIMITIVE · ACCENT SCALES * Supporting accents. Not for primary use. * ---------------------------------------------------------- */ /* Cream variants — page warmth */ --primitive-cream-50: #f5f0e8; /* = neutral-50, cream */ --primitive-cream-100: #e8e0d4; /* = neutral-150, cream-dark */ /* Pure white — specific use cases only */ --primitive-white: #ffffff; /* ---------------------------------------------------------- * PRIMITIVE · SPACING SCALE * Base unit: 8px. Every value is a multiple of 4px minimum. * xs=4, sm=8, md=16, lg=24, xl=32, 2xl=48, 3xl=64, 4xl=96 * ---------------------------------------------------------- */ --primitive-space-1: 4px; /* micro — icon gap, inline nudge */ --primitive-space-2: 8px; /* xs — tight pairs, label gap */ --primitive-space-3: 12px; /* small-medium */ --primitive-space-4: 16px; /* sm — internal padding, row gap */ --primitive-space-5: 20px; /* medium-small */ --primitive-space-6: 24px; /* md — card padding, section sub-gap */ --primitive-space-7: 28px; /* medium-large */ --primitive-space-8: 32px; /* lg — between components */ --primitive-space-10: 40px; /* extra */ --primitive-space-12: 48px; /* xl — section padding */ --primitive-space-16: 64px; /* 2xl — section gap desktop */ --primitive-space-20: 80px; /* 3xl — hero padding */ --primitive-space-24: 96px; /* 4xl — section height rhythm */ /* ---------------------------------------------------------- * PRIMITIVE · TYPOGRAPHY * Font families — two families only. * ---------------------------------------------------------- */ /* Display — Cormorant Garamond (serif) */ /* For: headlines, hero text, menu item names, section titles */ --primitive-font-display: 'Cormorant Garamond', 'Georgia', serif; /* Body — DM Sans (sans-serif) */ /* For: descriptions, nav, labels, buttons, captions, prices */ --primitive-font-body: 'DM Sans', 'Helvetica Neue', sans-serif; /* ---------------------------------------------------------- * PRIMITIVE · FONT SIZE SCALE * Named by size value. 11px minimum for legibility. * Display sizes use Cormorant Garamond at generous sizes. * ---------------------------------------------------------- */ --primitive-text-11: 11px; /* micro label, legal */ --primitive-text-12: 12px; /* caption, metadata */ --primitive-text-13: 13px; /* small label */ --primitive-text-14: 14px; /* body small, nav item */ --primitive-text-15: 15px; /* body default mobile */ --primitive-text-16: 16px; /* body default desktop */ --primitive-text-18: 18px; /* body large, card description */ --primitive-text-20: 20px; /* subtitle, badge */ --primitive-text-24: 24px; /* heading small */ --primitive-text-28: 28px; /* heading medium */ --primitive-text-32: 32px; /* heading */ --primitive-text-40: 40px; /* display small */ --primitive-text-48: 48px; /* display medium */ --primitive-text-56: 56px; /* display large */ --primitive-text-64: 64px; /* display xl */ --primitive-text-72: 72px; /* hero — Cormorant, desktop only */ /* ---------------------------------------------------------- * PRIMITIVE · FONT WEIGHT * ---------------------------------------------------------- */ --primitive-weight-light: 300; /* Cormorant italic passages */ --primitive-weight-regular: 400; /* DM Sans body */ --primitive-weight-medium: 500; /* DM Sans labels, nav */ --primitive-weight-semibold: 600; /* Cormorant headlines */ --primitive-weight-bold: 700; /* Cormorant hero, strong titles */ /* ---------------------------------------------------------- * PRIMITIVE · LINE HEIGHT * Tight for display, loose for body. * ---------------------------------------------------------- */ --primitive-leading-none: 1; /* display decorative — single line */ --primitive-leading-tight: 1.1; /* hero headlines */ --primitive-leading-snug: 1.2; /* large headlines */ --primitive-leading-normal: 1.35; /* subheadings */ --primitive-leading-relaxed: 1.55; /* body text, descriptions */ --primitive-leading-loose: 1.75; /* captions, small labels */ /* ---------------------------------------------------------- * PRIMITIVE · LETTER SPACING * Serif (display) → tight. Labels → wide. * ---------------------------------------------------------- */ --primitive-tracking-tight: -0.02em; /* large serif display */ --primitive-tracking-normal: 0em; /* body sans-serif */ --primitive-tracking-wide: 0.08em; /* labels, categories uppercase */ --primitive-tracking-wider: 0.12em; /* hero overlines, badges */ --primitive-tracking-widest: 0.18em; /* decorative all-caps */ /* ---------------------------------------------------------- * PRIMITIVE · SHADOW * Flat/editorial aesthetic. No excessive blur. * Named by intensity. * ---------------------------------------------------------- */ --primitive-shadow-none: none; /* Flat brutal — editorial stamp feel */ --primitive-shadow-flat: 2px 2px 0px rgba(26, 26, 26, 1); /* Soft lift — cards on cream background */ --primitive-shadow-soft: 0 2px 8px rgba(26, 26, 26, 0.08), 0 1px 2px rgba(26, 26, 26, 0.06); /* Medium — elevated cards, dropdowns */ --primitive-shadow-medium: 0 4px 16px rgba(26, 26, 26, 0.12), 0 2px 4px rgba(26, 26, 26, 0.08); /* Strong — modals, overlays */ --primitive-shadow-strong: 0 8px 32px rgba(26, 26, 26, 0.20), 0 4px 8px rgba(26, 26, 26, 0.12); /* Dark mode variant — lighter on dark background */ --primitive-shadow-dark-soft: 0 2px 8px rgba(0, 0, 0, 0.40); --primitive-shadow-dark-medium: 0 4px 16px rgba(0, 0, 0, 0.50); /* ---------------------------------------------------------- * PRIMITIVE · BORDER RADIUS * Editorial style — mostly sharp. Minimal rounding. * ---------------------------------------------------------- */ --primitive-radius-none: 0px; /* buttons, editorial frames */ --primitive-radius-sm: 2px; /* subtle softening, tags */ --primitive-radius-md: 4px; /* inputs, form elements */ --primitive-radius-lg: 8px; /* cards, panels */ --primitive-radius-xl: 12px; /* modals, overlays */ --primitive-radius-full: 9999px; /* pills, avatars */ /* ---------------------------------------------------------- * PRIMITIVE · BORDER WIDTH * ---------------------------------------------------------- */ --primitive-border-1: 1px; --primitive-border-2: 2px; --primitive-border-4: 4px; /* accent stripe, decorative rule */ /* ---------------------------------------------------------- * PRIMITIVE · TRANSITION * Restaurant UI should feel calm, never rushed. * ---------------------------------------------------------- */ --primitive-duration-instant: 0ms; --primitive-duration-fast: 150ms; --primitive-duration-normal: 300ms; /* standard hover/state change */ --primitive-duration-slow: 500ms; /* page reveals, section fades */ --primitive-duration-slower: 800ms; /* hero animations */ --primitive-ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* material ease */ --primitive-ease-in: cubic-bezier(0.4, 0, 1, 1); --primitive-ease-out: cubic-bezier(0, 0, 0.2, 1); --primitive-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---------------------------------------------------------- * PRIMITIVE · Z-INDEX * Named scale — never magic numbers in components. * ---------------------------------------------------------- */ --primitive-z-below: -1; /* backgrounds, decorative */ --primitive-z-base: 0; /* static content */ --primitive-z-raised: 10; /* cards on hover */ --primitive-z-dropdown: 100; /* menus, tooltips */ --primitive-z-sticky: 200; /* fixed nav */ --primitive-z-overlay: 300; /* modal backdrop */ --primitive-z-modal: 400; /* modal panel */ --primitive-z-toast: 500; /* notifications */ --primitive-z-supreme: 9999; /* emergency override */ /* ---------------------------------------------------------- * PRIMITIVE · BREAKPOINTS * Mobile-first. Reference values for CSS media queries. * Note: CSS custom properties cannot be used inside @media * rules — these are documentation references only. * Use: @media (min-width: 640px) { ... } * ---------------------------------------------------------- */ /* --primitive-breakpoint-sm: 640px — landscape mobile */ /* --primitive-breakpoint-md: 768px — tablet portrait */ /* --primitive-breakpoint-lg: 1024px — tablet landscape */ /* --primitive-breakpoint-xl: 1280px — desktop */ /* --primitive-breakpoint-2xl: 1536px — wide desktop */ /* ---------------------------------------------------------- * PRIMITIVE · OPACITY SCALE * ---------------------------------------------------------- */ --primitive-opacity-0: 0; --primitive-opacity-10: 0.10; --primitive-opacity-20: 0.20; --primitive-opacity-30: 0.30; --primitive-opacity-50: 0.50; --primitive-opacity-60: 0.60; --primitive-opacity-70: 0.70; --primitive-opacity-80: 0.80; --primitive-opacity-90: 0.90; --primitive-opacity-100: 1; } /* end :root — Primitives */ /* ============================================================ * LAYER 2 — SEMANTIC TOKENS * Tokens named by ROLE, not by value. * These are what developers reference in their CSS. * Light mode defaults. Dark mode overrides below. * ============================================================ */ :root { /* ---------------------------------------------------------- * SEMANTIC · BACKGROUND * Layered surfaces. Light mode = cream-warm. * ---------------------------------------------------------- */ /* Main page/document background */ --color-background-default: var(--primitive-neutral-50); /* #F5F0E8 cream */ /* Cards, panels, secondary surfaces */ --color-background-subtle: var(--primitive-neutral-150); /* #E8E0D4 cream-dark */ /* Inverted sections — dark hero, footer-dark */ --color-background-inverse: var(--primitive-neutral-900); /* #1A1A1A charcoal */ /* Elevated surface — on top of default background */ --color-background-elevated: var(--primitive-white); /* #FFFFFF pure white */ /* Overlay / scrim behind modals */ --color-background-overlay: rgba(26, 26, 26, 0.72); /* Tinted surface — green accent area, callouts */ --color-background-accent: var(--primitive-green-50); /* #F0F9EC very light green */ /* Section break — alternating */ --color-background-section-alt: var(--primitive-neutral-100); /* #EDE7DA */ /* ---------------------------------------------------------- * SEMANTIC · FOREGROUND (TEXT) * Contrast ratios against default background (cream): * charcoal on cream = ~13.6:1 (AAA) * warm-gray on cream = ~4.5:1 (AA) * ---------------------------------------------------------- */ /* Primary text — headlines, body, primary content */ --color-foreground-default: var(--primitive-neutral-900); /* #1A1A1A charcoal */ /* Secondary text — descriptions, metadata */ --color-foreground-subtle: var(--primitive-neutral-600); /* #6B6560 */ /* Muted text — placeholders, captions, disabled */ --color-foreground-muted: var(--primitive-neutral-500); /* #8A8178 warm-gray */ /* Text on inverted (dark) backgrounds */ --color-foreground-inverse: var(--primitive-neutral-50); /* #F5F0E8 cream */ /* Text on dark inverse surfaces — secondary */ --color-foreground-inverse-subtle: var(--primitive-neutral-300); /* #CAC1B2 */ /* ---------------------------------------------------------- * SEMANTIC · ACCENT * Primary accent = verde #4AB133. * Used for CTAs, active states, highlights. * ---------------------------------------------------------- */ /* Primary accent — the green */ --color-accent-primary: var(--primitive-green-500); /* #4AB133 verde */ /* Primary accent hover */ --color-accent-primary-hover: var(--primitive-green-600); /* #3D9429 */ /* Primary accent active/pressed */ --color-accent-primary-active: var(--primitive-green-700); /* #317520 */ /* Foreground ON primary accent (text/icon on green button) */ --color-accent-primary-foreground: var(--primitive-white); /* #FFFFFF */ /* Secondary accent — deep green for rich contexts */ --color-accent-secondary: var(--primitive-green-800); /* #295A1F verde-escuro */ /* Tertiary accent — lighter green for pills, tags */ --color-accent-tertiary: var(--primitive-green-400); /* #6FCC4B verde-claro */ /* Danger / error — wine red */ --color-accent-danger: var(--primitive-wine-500); /* #722F37 */ --color-accent-danger-hover: var(--primitive-wine-600); /* #5C2028 */ --color-accent-danger-foreground: var(--primitive-white); /* Success — (same as accent-primary in this brand) */ --color-accent-success: var(--primitive-green-500); /* #4AB133 */ /* ---------------------------------------------------------- * SEMANTIC · BORDER * ---------------------------------------------------------- */ /* Default border — light mode: near-charcoal but not full black */ --color-border-default: var(--primitive-neutral-900); /* #1A1A1A */ /* Subtle border — dividers, separators */ --color-border-subtle: var(--primitive-neutral-200); /* #DDD5C6 */ /* Accent border — highlight, focus ring */ --color-border-accent: var(--primitive-green-500); /* #4AB133 */ /* Danger border — error states */ --color-border-danger: var(--primitive-wine-500); /* #722F37 */ /* Inverted border — on dark surfaces */ --color-border-inverse: var(--primitive-neutral-700); /* #4A4540 */ /* ---------------------------------------------------------- * SEMANTIC · SURFACE * Named surfaces that appear as distinct layers. * ---------------------------------------------------------- */ /* Card default — sits on background/default */ --color-surface-card: var(--primitive-white); /* #FFFFFF */ /* Card elevated — shadow-lifted card */ --color-surface-card-elevated: var(--primitive-white); /* Menu item background — cream tint */ --color-surface-menu-item: var(--primitive-neutral-50); /* #F5F0E8 */ /* Menu item hover */ --color-surface-menu-item-hover: var(--primitive-neutral-150); /* #E8E0D4 */ /* Input background */ --color-surface-input: var(--primitive-white); /* Input hover */ --color-surface-input-hover: var(--primitive-neutral-50); /* Overlay / modal surface */ --color-surface-overlay: var(--primitive-white); /* Dark panel — inverted card */ --color-surface-dark: var(--primitive-neutral-800); /* #2A2A2A */ /* ---------------------------------------------------------- * SEMANTIC · SPACING * Role-based aliases so spacing intent is clear. * Every value maps to an 8px-grid primitive. * ---------------------------------------------------------- */ /* Section-level spacing — between major page sections */ --space-section-y: var(--primitive-space-24); /* 96px desktop */ --space-section-y-mobile: var(--primitive-space-12); /* 48px mobile */ /* Component-level — between cards in a grid */ --space-component-gap: var(--primitive-space-8); /* 32px */ --space-component-gap-sm: var(--primitive-space-6); /* 24px */ /* Element-level — within a single component */ --space-element-gap: var(--primitive-space-4); /* 16px */ --space-element-gap-sm: var(--primitive-space-2); /* 8px */ --space-element-gap-xs: var(--primitive-space-1); /* 4px */ /* Card padding */ --space-card-padding-x: var(--primitive-space-8); /* 32px */ --space-card-padding-y: var(--primitive-space-6); /* 24px */ --space-card-padding-x-sm: var(--primitive-space-4); /* 16px */ --space-card-padding-y-sm: var(--primitive-space-4); /* 16px */ /* Button padding */ --space-button-padding-x: var(--primitive-space-8); /* 32px */ --space-button-padding-y: var(--primitive-space-3); /* 12px */ /* Input padding */ --space-input-padding-x: var(--primitive-space-4); /* 16px */ --space-input-padding-y: var(--primitive-space-3); /* 12px */ /* Container max width */ --space-container-max: 1200px; --space-container-padding: var(--primitive-space-6); /* 24px */ /* ---------------------------------------------------------- * SEMANTIC · TYPOGRAPHY ROLES * Each role binds: font-family, size, weight, line-height, * letter-spacing. Developers apply one class, not 5 props. * ---------------------------------------------------------- */ /* --- HEADING ROLES (Cormorant Garamond) --- */ /* hero: full-viewport statement, italic option */ --type-hero-family: var(--primitive-font-display); --type-hero-size: var(--primitive-text-72); --type-hero-weight: var(--primitive-weight-bold); --type-hero-leading: var(--primitive-leading-tight); --type-hero-tracking: var(--primitive-tracking-tight); /* display: section hero headline */ --type-display-family: var(--primitive-font-display); --type-display-size: var(--primitive-text-56); --type-display-weight: var(--primitive-weight-semibold); --type-display-leading: var(--primitive-leading-tight); --type-display-tracking: var(--primitive-tracking-tight); /* heading-xl: section titles */ --type-heading-xl-family: var(--primitive-font-display); --type-heading-xl-size: var(--primitive-text-40); --type-heading-xl-weight: var(--primitive-weight-semibold); --type-heading-xl-leading: var(--primitive-leading-snug); --type-heading-xl-tracking: var(--primitive-tracking-tight); /* heading: card titles, subsection headers */ --type-heading-family: var(--primitive-font-display); --type-heading-size: var(--primitive-text-32); --type-heading-weight: var(--primitive-weight-semibold); --type-heading-leading: var(--primitive-leading-normal); --type-heading-tracking: var(--primitive-tracking-tight); /* heading-sm: sidebar headers, menu category */ --type-heading-sm-family: var(--primitive-font-display); --type-heading-sm-size: var(--primitive-text-24); --type-heading-sm-weight: var(--primitive-weight-semibold); --type-heading-sm-leading: var(--primitive-leading-normal); --type-heading-sm-tracking: var(--primitive-tracking-tight); /* menu-item: dish names in the menu */ --type-menu-item-family: var(--primitive-font-display); --type-menu-item-size: var(--primitive-text-20); --type-menu-item-weight: var(--primitive-weight-medium); --type-menu-item-leading: var(--primitive-leading-normal); --type-menu-item-tracking: var(--primitive-tracking-tight); /* --- BODY ROLES (DM Sans) --- */ /* body-lg: lead paragraphs, about section intro */ --type-body-lg-family: var(--primitive-font-body); --type-body-lg-size: var(--primitive-text-18); --type-body-lg-weight: var(--primitive-weight-regular); --type-body-lg-leading: var(--primitive-leading-relaxed); --type-body-lg-tracking: var(--primitive-tracking-normal); /* body: default paragraph text */ --type-body-family: var(--primitive-font-body); --type-body-size: var(--primitive-text-16); --type-body-weight: var(--primitive-weight-regular); --type-body-leading: var(--primitive-leading-relaxed); --type-body-tracking: var(--primitive-tracking-normal); /* body-sm: descriptions, menu subtitles */ --type-body-sm-family: var(--primitive-font-body); --type-body-sm-size: var(--primitive-text-14); --type-body-sm-weight: var(--primitive-weight-regular); --type-body-sm-leading: var(--primitive-leading-relaxed); --type-body-sm-tracking: var(--primitive-tracking-normal); /* caption: footnotes, timestamps, legal */ --type-caption-family: var(--primitive-font-body); --type-caption-size: var(--primitive-text-12); --type-caption-weight: var(--primitive-weight-regular); --type-caption-leading: var(--primitive-leading-loose); --type-caption-tracking: var(--primitive-tracking-normal); /* label: ALL CAPS category headers, overlines */ --type-label-family: var(--primitive-font-body); --type-label-size: var(--primitive-text-11); --type-label-weight: var(--primitive-weight-medium); --type-label-leading: var(--primitive-leading-normal); --type-label-tracking: var(--primitive-tracking-widest); /* label-sm: tight labels, badges */ --type-label-sm-family: var(--primitive-font-body); --type-label-sm-size: var(--primitive-text-11); --type-label-sm-weight: var(--primitive-weight-medium); --type-label-sm-leading: var(--primitive-leading-normal); --type-label-sm-tracking: var(--primitive-tracking-wider); /* nav: navigation items */ --type-nav-family: var(--primitive-font-body); --type-nav-size: var(--primitive-text-14); --type-nav-weight: var(--primitive-weight-medium); --type-nav-leading: var(--primitive-leading-normal); --type-nav-tracking: var(--primitive-tracking-wide); /* price: menu price display */ --type-price-family: var(--primitive-font-body); --type-price-size: var(--primitive-text-16); --type-price-weight: var(--primitive-weight-medium); --type-price-leading: var(--primitive-leading-normal); --type-price-tracking: var(--primitive-tracking-normal); /* ---------------------------------------------------------- * SEMANTIC · SHADOW * Named by role, not by value. * ---------------------------------------------------------- */ --shadow-none: var(--primitive-shadow-none); --shadow-card: var(--primitive-shadow-soft); --shadow-raised: var(--primitive-shadow-medium); --shadow-modal: var(--primitive-shadow-strong); --shadow-flat: var(--primitive-shadow-flat); /* editorial stamp */ /* ---------------------------------------------------------- * SEMANTIC · BORDER RADIUS * Role-based. Buttons are always 0px (editorial flat rule). * ---------------------------------------------------------- */ --radius-button: var(--primitive-radius-none); /* RULE: no radius on buttons */ --radius-input: var(--primitive-radius-md); /* 4px — subtle softening */ --radius-card: var(--primitive-radius-lg); /* 8px */ --radius-modal: var(--primitive-radius-xl); /* 12px */ --radius-badge: var(--primitive-radius-sm); /* 2px — editorial flat badge */ --radius-pill: var(--primitive-radius-full); /* for tab pills only */ --radius-image: var(--primitive-radius-none); /* photos always flush */ /* ---------------------------------------------------------- * SEMANTIC · TRANSITION * ---------------------------------------------------------- */ --transition-fast: var(--primitive-duration-fast) var(--primitive-ease-out); --transition-normal: var(--primitive-duration-normal) var(--primitive-ease-default); --transition-slow: var(--primitive-duration-slow) var(--primitive-ease-out); --transition-spring: var(--primitive-duration-normal) var(--primitive-ease-spring); /* ---------------------------------------------------------- * SEMANTIC · LAYOUT * ---------------------------------------------------------- */ --z-nav: var(--primitive-z-sticky); /* 200 */ --z-dropdown: var(--primitive-z-dropdown); /* 100 */ --z-overlay: var(--primitive-z-overlay); /* 300 */ --z-modal: var(--primitive-z-modal); /* 400 */ --z-toast: var(--primitive-z-toast); /* 500 */ } /* end :root — Semantic */ /* ============================================================ * DARK MODE — Semantic overrides only * Apply [data-theme="dark"] to via JS scroll detection * or dark section context. * Primitives DO NOT change — only semantic aliases change. * Rule: footer is always light — never override footer dark. * ============================================================ */ [data-theme="dark"], .section--dark { /* Background — charcoal base */ --color-background-default: var(--primitive-neutral-900); /* #1A1A1A */ --color-background-subtle: var(--primitive-neutral-800); /* #2A2A2A */ --color-background-inverse: var(--primitive-neutral-50); /* cream — inverted */ --color-background-elevated: var(--primitive-neutral-800); /* #2A2A2A */ --color-background-overlay: rgba(0, 0, 0, 0.80); --color-background-accent: var(--primitive-green-900); /* #1C3F16 deep green */ --color-background-section-alt: var(--primitive-neutral-800); /* Foreground — cream on dark */ --color-foreground-default: var(--primitive-neutral-50); /* #F5F0E8 cream */ --color-foreground-subtle: var(--primitive-neutral-300); /* #CAC1B2 */ --color-foreground-muted: var(--primitive-neutral-500); /* #8A8178 warm-gray */ --color-foreground-inverse: var(--primitive-neutral-900); /* charcoal */ --color-foreground-inverse-subtle: var(--primitive-neutral-600); /* Accent — green stays the same, adjusted hover */ --color-accent-primary: var(--primitive-green-400); /* #6FCC4B lighter green on dark */ --color-accent-primary-hover: var(--primitive-green-300); /* #8DD575 */ --color-accent-primary-active: var(--primitive-green-500); /* #4AB133 */ --color-accent-primary-foreground: var(--primitive-neutral-900); /* dark text on light green */ /* Border — subtle on dark */ --color-border-default: var(--primitive-neutral-700); /* #4A4540 */ --color-border-subtle: var(--primitive-neutral-800); /* #2A2A2A */ --color-border-accent: var(--primitive-green-400); /* #6FCC4B */ --color-border-inverse: var(--primitive-neutral-200); /* cream-toned */ /* Surface */ --color-surface-card: var(--primitive-neutral-800); /* #2A2A2A */ --color-surface-card-elevated: var(--primitive-neutral-700); /* #4A4540 */ --color-surface-menu-item: var(--primitive-neutral-800); --color-surface-menu-item-hover: var(--primitive-neutral-700); --color-surface-input: var(--primitive-neutral-800); --color-surface-input-hover: var(--primitive-neutral-700); --color-surface-overlay: var(--primitive-neutral-900); /* Shadow — lighter effect on dark bg */ --shadow-card: var(--primitive-shadow-dark-soft); --shadow-raised: var(--primitive-shadow-dark-medium); } /* ============================================================ * LAYER 3 — COMPONENT TOKENS * Scoped per component. Reference semantic tokens. * Override only the component token, not the semantic. * Format: --[component]-[element]-[property]-[state] * ============================================================ */ :root { /* ========================================================== * COMPONENT · BUTTON * 4 variants: primary, outline, ghost, link * States: default, hover, active, disabled, focus * RULE: border-radius always 0px (--radius-button) * RULE: font always DM Sans, medium weight, tracked wide * ========================================================== */ /* --- Base button token defaults (shared across variants) --- */ --btn-font-family: var(--type-nav-family); /* DM Sans */ --btn-font-size: var(--primitive-text-13); --btn-font-weight: var(--primitive-weight-medium); --btn-letter-spacing: var(--primitive-tracking-wide); /* 0.08em */ --btn-text-transform: uppercase; /* labels always uppercase */ --btn-border-radius: var(--radius-button); /* 0px — editorial flat */ --btn-border-width: var(--primitive-border-1); --btn-padding-x: var(--space-button-padding-x); /* 32px */ --btn-padding-y: var(--space-button-padding-y); /* 12px */ --btn-transition: var(--transition-normal); --btn-cursor: pointer; --btn-cursor-disabled: not-allowed; --btn-opacity-disabled: 0.45; /* --- BUTTON / PRIMARY --- */ /* Filled green background, white text */ --btn-primary-bg: var(--color-accent-primary); /* #4AB133 */ --btn-primary-bg-hover: var(--color-accent-primary-hover); /* #3D9429 */ --btn-primary-bg-active: var(--color-accent-primary-active); /* #317520 */ --btn-primary-bg-disabled: var(--color-accent-primary); --btn-primary-color: var(--color-accent-primary-foreground); /* white */ --btn-primary-color-hover: var(--color-accent-primary-foreground); --btn-primary-color-disabled: var(--color-accent-primary-foreground); --btn-primary-border: var(--color-accent-primary); --btn-primary-border-hover: var(--color-accent-primary-hover); --btn-primary-border-disabled: var(--color-accent-primary); --btn-primary-shadow: var(--shadow-flat); /* 2px 2px 0px charcoal */ --btn-primary-shadow-hover: var(--shadow-none); --btn-primary-transform-hover: translate(2px, 2px); /* flat shadow press */ /* --- BUTTON / OUTLINE --- */ /* Transparent background, green border, green text */ --btn-outline-bg: transparent; --btn-outline-bg-hover: var(--color-accent-primary); --btn-outline-bg-active: var(--color-accent-primary-active); --btn-outline-bg-disabled: transparent; --btn-outline-color: var(--color-accent-primary); /* #4AB133 */ --btn-outline-color-hover: var(--color-accent-primary-foreground); /* white */ --btn-outline-color-disabled: var(--color-foreground-muted); --btn-outline-border: var(--color-accent-primary); --btn-outline-border-hover: var(--color-accent-primary); --btn-outline-border-disabled: var(--color-border-subtle); --btn-outline-shadow: var(--shadow-none); --btn-outline-shadow-hover: var(--shadow-none); /* --- BUTTON / GHOST --- */ /* No background, no border, charcoal text — inline usage */ --btn-ghost-bg: transparent; --btn-ghost-bg-hover: var(--color-background-subtle); --btn-ghost-bg-active: var(--color-background-section-alt); --btn-ghost-bg-disabled: transparent; --btn-ghost-color: var(--color-foreground-default); --btn-ghost-color-hover: var(--color-foreground-default); --btn-ghost-color-disabled: var(--color-foreground-muted); --btn-ghost-border: transparent; --btn-ghost-border-hover: transparent; --btn-ghost-border-disabled: transparent; /* --- BUTTON / LINK --- */ /* Text only, no padding sides, underline on hover */ --btn-link-bg: transparent; --btn-link-color: var(--color-accent-primary); --btn-link-color-hover: var(--color-accent-primary-hover); --btn-link-color-active: var(--color-accent-primary-active); --btn-link-decoration: none; --btn-link-decoration-hover: underline; --btn-link-padding-x: 0; --btn-link-border: none; /* --- BUTTON / FOCUS RING (shared) --- */ --btn-focus-ring-color: var(--color-accent-primary); --btn-focus-ring-width: 2px; --btn-focus-ring-offset: 2px; /* ========================================================== * COMPONENT · CARD * 3 variants: default, elevated, menu-item * ========================================================== */ /* --- CARD / DEFAULT --- */ /* White panel on cream background */ --card-bg: var(--color-surface-card); /* white */ --card-border: var(--color-border-subtle); /* #DDD5C6 */ --card-border-width: var(--primitive-border-1); --card-radius: var(--radius-card); /* 8px */ --card-shadow: var(--shadow-card); --card-padding-x: var(--space-card-padding-x); /* 32px */ --card-padding-y: var(--space-card-padding-y); /* 24px */ --card-gap: var(--space-element-gap); /* 16px */ --card-transition: var(--transition-normal); /* Card hover lift */ --card-bg-hover: var(--color-surface-card); --card-shadow-hover: var(--shadow-raised); --card-transform-hover: translateY(-2px); /* --- CARD / ELEVATED --- */ /* Stronger shadow, used for featured/highlighted cards */ --card-elevated-bg: var(--color-surface-card-elevated); --card-elevated-border: var(--color-border-accent); /* green border accent */ --card-elevated-shadow: var(--shadow-raised); --card-elevated-radius: var(--radius-card); --card-elevated-padding-x: var(--space-card-padding-x); --card-elevated-padding-y: var(--space-card-padding-y); /* --- CARD / MENU-ITEM --- */ /* Dish entry in the restaurant menu */ /* Contains: label, name (display serif), description, price, badge */ --card-menu-bg: var(--color-surface-menu-item); /* cream */ --card-menu-bg-hover: var(--color-surface-menu-item-hover); /* cream-dark */ --card-menu-border: var(--color-border-subtle); --card-menu-border-width: var(--primitive-border-1); --card-menu-radius: var(--primitive-radius-none); /* sharp, editorial */ --card-menu-shadow: var(--shadow-none); --card-menu-shadow-hover: var(--shadow-flat); /* flat press on hover */ --card-menu-padding-x: var(--space-card-padding-x-sm); /* 16px */ --card-menu-padding-y: var(--space-card-padding-y-sm); /* 16px */ --card-menu-gap: var(--space-element-gap-sm); /* 8px */ --card-menu-transition: var(--transition-normal); /* Menu item: name text */ --card-menu-name-color: var(--color-foreground-default); --card-menu-name-family: var(--type-menu-item-family); --card-menu-name-size: var(--type-menu-item-size); --card-menu-name-weight: var(--type-menu-item-weight); /* Menu item: description text */ --card-menu-desc-color: var(--color-foreground-subtle); --card-menu-desc-size: var(--type-body-sm-size); /* Menu item: bottom rule between items */ --card-menu-divider-color: var(--color-border-subtle); /* ========================================================== * COMPONENT · BADGE * 4 variants: default, featured, popular, chef-choice * All badges: no radius (editorial flat), uppercase label * ========================================================== */ /* --- BADGE / BASE (shared) --- */ --badge-font-family: var(--type-label-family); --badge-font-size: var(--type-label-size); /* 11px */ --badge-font-weight: var(--type-label-weight); /* medium */ --badge-letter-spacing: var(--type-label-tracking); /* 0.18em */ --badge-text-transform: uppercase; --badge-padding-x: var(--primitive-space-3); /* 12px */ --badge-padding-y: var(--primitive-space-1); /* 4px */ --badge-radius: var(--radius-badge); /* 2px */ --badge-border-width: var(--primitive-border-1); /* --- BADGE / DEFAULT --- */ --badge-default-bg: var(--color-background-subtle); /* cream-dark */ --badge-default-color: var(--color-foreground-subtle); --badge-default-border: var(--color-border-subtle); /* --- BADGE / FEATURED --- */ /* Highlighted item, used for chef specials */ --badge-featured-bg: var(--color-accent-primary); /* #4AB133 verde */ --badge-featured-color: var(--primitive-white); --badge-featured-border: var(--color-accent-primary); /* --- BADGE / POPULAR --- */ /* Community favorite, repeat orders */ --badge-popular-bg: var(--primitive-neutral-900); /* charcoal */ --badge-popular-color: var(--primitive-neutral-50); /* cream */ --badge-popular-border: var(--primitive-neutral-900); /* --- BADGE / CHEF-CHOICE --- */ /* Curated by Chef J personally */ --badge-chef-bg: var(--color-accent-secondary); /* #295A1F verde-escuro */ --badge-chef-color: var(--primitive-white); --badge-chef-border: var(--color-accent-secondary); /* ========================================================== * COMPONENT · INPUT * States: default, focus, error, disabled * ========================================================== */ /* --- INPUT / BASE --- */ --input-font-family: var(--type-body-family); --input-font-size: var(--type-body-size); /* 16px */ --input-font-weight: var(--type-body-weight); /* 400 */ --input-line-height: var(--type-body-leading); --input-padding-x: var(--space-input-padding-x); /* 16px */ --input-padding-y: var(--space-input-padding-y); /* 12px */ --input-border-radius: var(--radius-input); /* 4px */ --input-border-width: var(--primitive-border-1); --input-transition: var(--transition-fast); /* --- INPUT / DEFAULT --- */ --input-bg: var(--color-surface-input); /* white */ --input-color: var(--color-foreground-default); --input-border: var(--color-border-default); --input-placeholder: var(--color-foreground-muted); /* Label above input */ --input-label-color: var(--color-foreground-subtle); --input-label-size: var(--type-label-size); /* 11px */ --input-label-tracking: var(--type-label-tracking); /* wide */ --input-label-transform: uppercase; /* --- INPUT / FOCUS --- */ --input-focus-bg: var(--color-surface-input); --input-focus-border: var(--color-border-accent); /* #4AB133 green */ --input-focus-shadow: 0 0 0 3px rgba(74, 177, 51, 0.15); /* subtle green glow */ --input-focus-color: var(--color-foreground-default); /* --- INPUT / ERROR --- */ --input-error-bg: var(--primitive-wine-100); /* very light wine */ --input-error-border: var(--color-border-danger); /* #722F37 */ --input-error-color: var(--color-foreground-default); --input-error-msg-color: var(--color-accent-danger); /* --- INPUT / DISABLED --- */ --input-disabled-bg: var(--color-background-subtle); --input-disabled-border: var(--color-border-subtle); --input-disabled-color: var(--color-foreground-muted); --input-disabled-opacity: 0.65; --input-disabled-cursor: not-allowed; /* ========================================================== * COMPONENT · NAV (Navigation bar) * 2 states: transparent (at top), scrolled (solid) * Transitions as user scrolls down. Fixed position. * ========================================================== */ /* --- NAV / BASE --- */ --nav-height: 72px; --nav-height-mobile: 60px; --nav-padding-x: var(--space-container-padding); /* 24px */ --nav-z-index: var(--z-nav); /* 200 */ --nav-transition: background var(--transition-slow), box-shadow var(--transition-slow), color var(--transition-slow); /* Nav link typography */ --nav-link-family: var(--type-nav-family); --nav-link-size: var(--type-nav-size); /* 14px */ --nav-link-weight: var(--type-nav-weight); /* medium */ --nav-link-tracking: var(--type-nav-tracking); /* 0.08em */ --nav-link-transform: uppercase; /* --- NAV / TRANSPARENT (hero context) --- */ /* Nav floats over hero image — cream text on dark bg */ --nav-transparent-bg: transparent; --nav-transparent-border: transparent; --nav-transparent-shadow: var(--shadow-none); --nav-transparent-color: var(--primitive-neutral-50); /* cream */ --nav-transparent-color-hover: var(--color-accent-primary); /* verde */ --nav-transparent-color-active: var(--color-accent-tertiary); /* verde-claro */ --nav-transparent-logo-filter: brightness(0) invert(1); /* white logo */ /* --- NAV / SCROLLED (past hero) --- */ /* Solid cream background, charcoal text */ --nav-scrolled-bg: var(--color-background-elevated); /* white */ --nav-scrolled-border: var(--color-border-subtle); /* bottom border */ --nav-scrolled-border-width: var(--primitive-border-1); --nav-scrolled-shadow: var(--shadow-card); --nav-scrolled-color: var(--color-foreground-default); --nav-scrolled-color-hover: var(--color-accent-primary); --nav-scrolled-color-active: var(--color-accent-primary-active); --nav-scrolled-logo-filter: none; /* full color logo */ /* ========================================================== * COMPONENT · SECTION * 2 variants: light, dark * Sets background and text color for full-page sections. * ========================================================== */ /* --- SECTION / LIGHT --- */ --section-light-bg: var(--color-background-default); /* cream */ --section-light-color: var(--color-foreground-default); --section-light-heading: var(--color-foreground-default); --section-light-label: var(--color-accent-primary); /* verde labels */ --section-light-padding-y: var(--space-section-y); /* 96px */ /* --- SECTION / ALT (alternating cream-dark) --- */ --section-alt-bg: var(--color-background-section-alt); --section-alt-color: var(--color-foreground-default); --section-alt-padding-y: var(--space-section-y); /* --- SECTION / DARK (inverted hero areas) --- */ --section-dark-bg: var(--color-background-inverse); /* charcoal */ --section-dark-color: var(--color-foreground-inverse); /* cream */ --section-dark-heading: var(--color-foreground-inverse); --section-dark-label: var(--color-accent-tertiary); /* verde-claro on dark */ --section-dark-padding-y: var(--space-section-y); /* ========================================================== * COMPONENT · MENU TAB * Used in cardápio section: Café, Almoço, Happy Hour, Jantar * 2 states: default, active * ========================================================== */ /* --- MENU TAB / BASE --- */ --tab-font-family: var(--type-label-family); --tab-font-size: var(--primitive-text-13); --tab-font-weight: var(--primitive-weight-medium); --tab-letter-spacing: var(--primitive-tracking-wide); --tab-text-transform: uppercase; --tab-padding-x: var(--primitive-space-6); /* 24px */ --tab-padding-y: var(--primitive-space-3); /* 12px */ --tab-radius: var(--primitive-radius-none); /* flat, editorial */ --tab-border-width: var(--primitive-border-2); --tab-transition: var(--transition-normal); --tab-gap: var(--primitive-space-1); /* 4px between tabs */ /* --- MENU TAB / DEFAULT --- */ --tab-default-bg: transparent; --tab-default-color: var(--color-foreground-muted); --tab-default-border-color: transparent; --tab-default-border-pos: bottom; /* --- MENU TAB / HOVER --- */ --tab-hover-bg: var(--color-background-subtle); --tab-hover-color: var(--color-foreground-default); --tab-hover-border-color: var(--color-border-subtle); /* --- MENU TAB / ACTIVE --- */ --tab-active-bg: transparent; --tab-active-color: var(--color-accent-primary); /* verde */ --tab-active-border-color: var(--color-accent-primary); /* verde underline */ /* ========================================================== * COMPONENT · TESTIMONIAL CARD * 3 testimonials with stars, avatar, name, text. * Design: editorial — large serif quote, minimal chrome. * ========================================================== */ --testimonial-bg: var(--color-surface-card); --testimonial-border: var(--color-border-subtle); --testimonial-border-width: var(--primitive-border-1); --testimonial-radius: var(--radius-card); --testimonial-shadow: var(--shadow-card); --testimonial-padding-x: var(--primitive-space-8); /* 32px */ --testimonial-padding-y: var(--primitive-space-8); /* 32px */ --testimonial-gap: var(--primitive-space-4); /* 16px */ /* Quote mark — decorative, Cormorant, large */ --testimonial-quote-color: var(--color-accent-primary); /* verde */ --testimonial-quote-size: var(--primitive-text-72); --testimonial-quote-family: var(--primitive-font-display); --testimonial-quote-leading: var(--primitive-leading-none); /* Quote body text */ --testimonial-text-color: var(--color-foreground-default); --testimonial-text-size: var(--type-body-lg-size); /* 18px */ --testimonial-text-family: var(--primitive-font-display); /* Cormorant italic */ --testimonial-text-style: italic; /* Author name */ --testimonial-author-color: var(--color-foreground-subtle); --testimonial-author-size: var(--type-label-size); --testimonial-author-tracking: var(--primitive-tracking-wide); --testimonial-author-transform: uppercase; /* Stars */ --testimonial-star-color: var(--color-accent-primary); /* verde */ /* Avatar — always B&W */ --testimonial-avatar-size: 48px; --testimonial-avatar-radius: var(--primitive-radius-full); --testimonial-avatar-filter: grayscale(100%); /* B&W rule */ /* ========================================================== * COMPONENT · GALLERY ITEM * Photo strip. Photos always B&W. Hover reveals overlay. * ========================================================== */ --gallery-item-radius: var(--radius-image); /* 0px — flush */ --gallery-item-overflow: hidden; --gallery-item-transition: var(--transition-slow); /* Photo treatment — always grayscale */ --gallery-photo-filter: grayscale(100%); --gallery-photo-filter-hover: grayscale(100%); /* stays B&W even on hover */ --gallery-photo-scale-hover: scale(1.04); --gallery-photo-transition: transform var(--transition-slow) var(--primitive-ease-out); /* Overlay on hover — shows dish name */ --gallery-overlay-bg: rgba(26, 26, 26, 0.70); /* charcoal translucent */ --gallery-overlay-color: var(--primitive-neutral-50); /* cream text */ --gallery-overlay-opacity-default: 0; --gallery-overlay-opacity-hover: 1; /* Caption on overlay */ --gallery-caption-family: var(--primitive-font-display); --gallery-caption-size: var(--primitive-text-20); --gallery-caption-weight: var(--primitive-weight-semibold); --gallery-caption-color: var(--primitive-neutral-50); --gallery-caption-tracking: var(--primitive-tracking-tight); /* ========================================================== * COMPONENT · PRICE DISPLAY * Shown in menu items. DM Sans, medium weight. * Verde for emphasis — not muted. * ========================================================== */ --price-font-family: var(--type-price-family); /* DM Sans */ --price-font-size: var(--type-price-size); /* 16px */ --price-font-weight: var(--type-price-weight); /* medium */ --price-color: var(--color-foreground-default); /* charcoal */ --price-color-featured: var(--color-accent-primary); /* verde for special items */ --price-letter-spacing: var(--primitive-tracking-normal); /* Currency symbol (R$) — slightly smaller, muted */ --price-currency-size: var(--primitive-text-13); --price-currency-color: var(--color-foreground-muted); /* ========================================================== * COMPONENT · STATUS INDICATOR * 2 states: open, closed * Displayed in nav or near the reservation section. * ========================================================== */ --status-font-family: var(--type-label-family); --status-font-size: var(--type-label-size); /* 11px */ --status-font-weight: var(--type-label-weight); --status-letter-spacing: var(--type-label-tracking); --status-text-transform: uppercase; --status-padding-x: var(--primitive-space-3); /* 12px */ --status-padding-y: var(--primitive-space-1); /* 4px */ --status-radius: var(--primitive-radius-full); /* pill — status is round */ --status-dot-size: 8px; --status-dot-gap: var(--primitive-space-2); /* 8px */ /* --- STATUS / OPEN --- */ --status-open-bg: var(--primitive-green-50); /* light green */ --status-open-color: var(--primitive-green-800); /* #295A1F */ --status-open-dot: var(--primitive-green-500); /* #4AB133 */ --status-open-border: var(--primitive-green-200); /* --- STATUS / CLOSED --- */ --status-closed-bg: var(--primitive-wine-100); /* light wine */ --status-closed-color: var(--primitive-wine-500); /* #722F37 */ --status-closed-dot: var(--primitive-wine-500); --status-closed-border: var(--primitive-wine-200); /* ========================================================== * COMPONENT · DIVIDER * Horizontal rule. 2 variants: default (line), accent (verde) * ========================================================== */ --divider-height: var(--primitive-border-1); --divider-color: var(--color-border-subtle); --divider-margin-y: var(--primitive-space-8); /* 32px */ /* Accent divider — verde, thicker */ --divider-accent-height: var(--primitive-border-4); /* 4px */ --divider-accent-color: var(--color-accent-primary); /* verde */ --divider-accent-width: 40px; /* partial width, editorial */ --divider-accent-margin-y: var(--primitive-space-6); /* 24px */ /* Inverted divider — on dark sections */ --divider-inverse-color: var(--color-border-inverse); /* #4A4540 */ /* ========================================================== * COMPONENT · FOOTER * RULE: Footer ALWAYS light background — never dark. * 4 columns: brand, nav, horários, endereço. * ========================================================== */ --footer-bg: var(--color-background-elevated); /* white */ --footer-color: var(--color-foreground-subtle); --footer-border-top: var(--color-border-subtle); --footer-border-width: var(--primitive-border-1); --footer-padding-y: var(--primitive-space-16); /* 64px */ --footer-padding-x: var(--space-container-padding); /* Footer brand area */ --footer-brand-color: var(--color-foreground-default); --footer-brand-size: var(--primitive-text-13); /* Footer heading (column titles) */ --footer-heading-color: var(--color-foreground-default); --footer-heading-size: var(--type-label-size); /* 11px */ --footer-heading-weight: var(--type-label-weight); --footer-heading-tracking: var(--type-label-tracking); --footer-heading-transform: uppercase; --footer-heading-margin-b: var(--primitive-space-4); /* 16px */ /* Footer links */ --footer-link-color: var(--color-foreground-subtle); --footer-link-color-hover: var(--color-accent-primary); /* verde */ --footer-link-size: var(--type-body-sm-size); /* 14px */ --footer-link-decoration: none; --footer-link-transition: var(--transition-fast); --footer-link-gap: var(--primitive-space-3); /* 12px between links */ /* Footer credit line (Studio Mosaiko) */ --footer-credit-color: var(--color-foreground-muted); --footer-credit-size: var(--primitive-text-12); --footer-credit-border-top: var(--color-border-subtle); --footer-credit-padding-y: var(--primitive-space-4); /* 16px */ } /* end :root — Component Tokens */ /* ============================================================ * UTILITY CLASSES — Helper classes generated from tokens * Optional. Attach where convenience is needed. * Developers can also use CSS custom properties directly. * ============================================================ */ /* Typography role classes */ .t-hero { font-family: var(--type-hero-family); font-size: var(--type-hero-size); font-weight: var(--type-hero-weight); line-height: var(--type-hero-leading); letter-spacing: var(--type-hero-tracking); } .t-display { font-family: var(--type-display-family); font-size: var(--type-display-size); font-weight: var(--type-display-weight); line-height: var(--type-display-leading); letter-spacing: var(--type-display-tracking); } .t-heading-xl { font-family: var(--type-heading-xl-family); font-size: var(--type-heading-xl-size); font-weight: var(--type-heading-xl-weight); line-height: var(--type-heading-xl-leading); letter-spacing: var(--type-heading-xl-tracking); } .t-heading { font-family: var(--type-heading-family); font-size: var(--type-heading-size); font-weight: var(--type-heading-weight); line-height: var(--type-heading-leading); letter-spacing: var(--type-heading-tracking); } .t-heading-sm { font-family: var(--type-heading-sm-family); font-size: var(--type-heading-sm-size); font-weight: var(--type-heading-sm-weight); line-height: var(--type-heading-sm-leading); letter-spacing: var(--type-heading-sm-tracking); } .t-menu-item { font-family: var(--type-menu-item-family); font-size: var(--type-menu-item-size); font-weight: var(--type-menu-item-weight); line-height: var(--type-menu-item-leading); letter-spacing: var(--type-menu-item-tracking); } .t-body-lg { font-family: var(--type-body-lg-family); font-size: var(--type-body-lg-size); font-weight: var(--type-body-lg-weight); line-height: var(--type-body-lg-leading); } .t-body { font-family: var(--type-body-family); font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-leading); } .t-body-sm { font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-leading); } .t-caption { font-family: var(--type-caption-family); font-size: var(--type-caption-size); line-height: var(--type-caption-leading); color: var(--color-foreground-muted); } .t-label { font-family: var(--type-label-family); font-size: var(--type-label-size); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-tracking); text-transform: uppercase; } /* Photo treatment — apply to all restaurant photos */ .photo--bw { filter: grayscale(100%); /* RULE: All restaurant photos are black and white */ } /* ========================================================== * COMPONENT REFERENCE — How to apply tokens * Not real CSS — comments for developer documentation. * ========================================================== BUTTON PRIMARY: background: var(--btn-primary-bg); color: var(--btn-primary-color); border: var(--btn-border-width) solid var(--btn-primary-border); border-radius: var(--btn-border-radius); /× always 0px ×/ padding: var(--btn-padding-y) var(--btn-padding-x); font-family: var(--btn-font-family); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); letter-spacing: var(--btn-letter-spacing); text-transform: var(--btn-text-transform); box-shadow: var(--btn-primary-shadow); transition: var(--btn-transition); &:hover { background: var(--btn-primary-bg-hover); box-shadow: var(--btn-primary-shadow-hover); transform: var(--btn-primary-transform-hover); } &:disabled { opacity: var(--btn-opacity-disabled); cursor: var(--btn-cursor-disabled); } MENU ITEM CARD: background: var(--card-menu-bg); padding: var(--card-menu-padding-y) var(--card-menu-padding-x); border-bottom: var(--card-menu-border-width) solid var(--card-menu-border); border-radius: var(--card-menu-radius); /× 0px ×/ transition: var(--card-menu-transition); &:hover { background: var(--card-menu-bg-hover); box-shadow: var(--card-menu-shadow-hover); } STATUS INDICATOR (OPEN): background: var(--status-open-bg); color: var(--status-open-color); border: 1px solid var(--status-open-border); border-radius: var(--status-radius); padding: var(--status-padding-y) var(--status-padding-x); &::before { /× dot ×/ width: var(--status-dot-size); height: var(--status-dot-size); background: var(--status-open-dot); border-radius: 50%; } DARK SECTION: Add [data-theme="dark"] or class .section--dark to parent. All semantic tokens auto-update — no component-level changes needed. Exception: .footer never receives dark theme. * ========================================================== */ /* ============================================================ * RESPONSIVE ADJUSTMENTS * Scale down type and spacing at mobile breakpoints. * All values still reference tokens — no hardcoding. * ============================================================ */ @media (max-width: 768px) { :root { /* Reduce hero/display type on mobile */ --type-hero-size: var(--primitive-text-48); --type-display-size: var(--primitive-text-40); --type-heading-xl-size: var(--primitive-text-32); --type-heading-size: var(--primitive-text-24); /* Section padding tighter on mobile */ --space-section-y: var(--space-section-y-mobile); /* 48px */ /* Card padding tighter */ --card-padding-x: var(--space-card-padding-x-sm); /* 16px */ --card-padding-y: var(--space-card-padding-y-sm); /* 16px */ /* Nav height */ --nav-height: var(--nav-height-mobile); /* 60px */ /* Button padding slightly tighter */ --btn-padding-x: var(--primitive-space-6); /* 24px */ } } @media (max-width: 480px) { :root { /* Smallest breakpoint — further scale down */ --type-hero-size: var(--primitive-text-40); --type-display-size: var(--primitive-text-32); --type-heading-xl-size: var(--primitive-text-28); /* Container padding */ --space-container-padding: var(--primitive-space-4); /* 16px */ } } /* ============================================================ * TOKEN AUDIT TABLE * Quick reference for QA and developers. * * Primitive counts: * Green scale: 10 tokens (50–900) * Neutral scale: 14 tokens (0–1000) * Wine scale: 8 tokens (100–800) * Spacing: 13 tokens * Font size: 16 tokens * Font weight: 5 tokens * Line height: 6 tokens * Letter spacing: 5 tokens * Shadow: 6 tokens * Radius: 6 tokens * Border width: 3 tokens * Transition: 9 tokens * Z-index: 7 tokens * Opacity: 10 tokens * TOTAL: ~128 primitive tokens * * Semantic counts: * Background: 7 tokens * Foreground: 5 tokens * Accent: 9 tokens * Border: 5 tokens * Surface: 8 tokens * Spacing: 12 tokens * Typography: 18 roles × 3–5 props = ~78 tokens * Shadow: 4 tokens * Radius: 7 tokens * Transition: 4 tokens * Layout (z): 5 tokens * TOTAL: ~164 semantic tokens * * Component counts (tokens): * Button: ~45 tokens (4 variants × states) * Card: ~30 tokens (3 variants) * Badge: ~20 tokens (4 variants) * Input: ~25 tokens (4 states) * Nav: ~20 tokens (2 states) * Section: ~15 tokens (3 variants) * Menu Tab: ~15 tokens (3 states) * Testimonial: ~20 tokens * Gallery: ~15 tokens * Price: ~8 tokens * Status: ~16 tokens (2 states) * Divider: ~10 tokens * Footer: ~15 tokens * TOTAL: ~254 component tokens * * GRAND TOTAL: ~546 design tokens * ============================================================ */