/** * ROYA - Design Tokens * * The single source of truth for every design value in this theme. * Extracted from Figma file ZXWJfiQm9l1geugf3Ug4Yo. * Provenance for each value: docs/01-design-system.md * * RULES * - No raw hex values anywhere outside this file. * - Component CSS consumes the semantic aliases (--roya-accent), not the raw * palette names (--roya-sage), so a palette change stays a one-line edit. * - Figma's original Hebrew variable names are kept in comments so the design * conversation and the code stay in sync. * * BREAKPOINTS (hardcoded in media queries - custom properties cannot be used * inside @media conditions, so this comment is the canonical list): * 480px phone landscape * 768px tablet * 1024px small laptop * 1280px desktop * 1440px design canvas width */ :root { /* ========================================================================== Palette Named Figma variables, mapped one-to-one. ========================================================================== */ --roya-sage: #7c7d6c; /* ירוק מרווה - primary brand */ --roya-graphite: #433d35; /* אפור גרפיט - headings, rules */ --roya-brown: #b8a185; /* חום בינוני - footer band */ --roya-brown-light: #dccfbf; /* חום בהיר - borders, testimonial cards */ --roya-cream: #f8f2ed; /* שמנת - page background */ --roya-ink: #3a342e; /* unnamed in Figma - body copy, form labels */ --roya-paper: #ffffff; /* unnamed in Figma - collage paper sheets */ /* Translucent derivatives ------------------------------------------------ */ --roya-watermark: rgba(67, 61, 53, 0.05); /* ghost display type */ --roya-watermark-strong: rgba(67, 61, 53, 0.12); /* ARTICLES&TIPS only */ --roya-glass-light: rgba(255, 255, 255, 0.74); --roya-glass-cream: rgba(248, 242, 237, 0.6); --roya-glass-sage: rgba(255, 255, 255, 0.15); --roya-glass-border: rgba(255, 255, 255, 0.01); --roya-scrim: rgba(58, 52, 46, 0.92); /* --roya-ink; lightbox backdrop */ /* Semantic aliases - prefer these in component CSS ----------------------- */ --roya-bg: var(--roya-cream); --roya-text: var(--roya-ink); --roya-heading: var(--roya-graphite); --roya-accent: var(--roya-sage); --roya-border: var(--roya-brown-light); --roya-on-accent: var(--roya-cream); --roya-rule: var(--roya-graphite); --roya-media-placeholder: var(--roya-brown-light); /* card fill behind a photo, Figma 1:171-176 */ /* ========================================================================== Elevation ========================================================================== */ --roya-shadow-soft: 0 4px 4px rgba(58, 52, 46, 0.2); /* צל עדין */ --roya-shadow-card: 0 4px 20px rgba(67, 61, 53, 0.24); /* what the home page and the footer actually apply, whatever the style is called */ --roya-shadow-box: 0 4px 16px 8px rgba(67, 61, 53, 0.12); /* צל קופסאות as the named style really defines it - the projects archive is the first place in the file that uses it (D-29) */ --roya-shadow-glass: 15px 0 20.2px rgba(0, 0, 0, 0.1); --roya-blur-panel: 30px; --roya-blur-strong: 50px; /* about panel, sits over photography */ /* ========================================================================== Typography ========================================================================== */ /* Fb Mega carries all Hebrew content and is not optional. Brown Sugar is decorative Latin only - ghost headings and vertical labels. Both are pending license (docs/00-project-brief.md Q1); the fallback stacks below keep the site legible until the woff2 files land. */ /* "Brown Sugar Latin" is unicode-range-limited to A-Z/a-z, so English words pick up the display face everywhere without any markup. */ --roya-font-body: "Brown Sugar Latin", "Fb Mega", "Heebo", "Arial Hebrew", "Segoe UI", sans-serif; --roya-font-display: "Brown Sugar", "Didot", "Playfair Display", Georgia, serif; /* Figma reports fontWeight 400 for both the Light and Regular faces of Fb Mega. Remap these once the real font files are in hand. */ --roya-weight-light: 300; --roya-weight-regular: 400; /* Fluid type scale. Each max matches the design's 1440px value exactly; the min is a legible mobile size. */ --roya-text-page-title: clamp(3rem, 11.1vw, 10rem); /* 160px */ --roya-text-section: clamp(2.75rem, 10.4vw, 9.375rem); /* 150px */ --roya-text-section-alt: clamp(2.5rem, 8.9vw, 8rem); /* 128px, on dark */ --roya-text-label: clamp(1.5rem, 4.4vw, 4rem); /* 64px, form labels */ --roya-text-body-lg: clamp(1.125rem, 3.5vw, 3.125rem); /* 50px */ --roya-text-subtitle: clamp(1.125rem, 3.3vw, 3rem); /* 48px */ --roya-text-body: clamp(1.0625rem, 3.1vw, 2.8125rem); /* 45px */ --roya-text-button: clamp(1rem, 2.8vw, 2.5rem); /* 40px */ --roya-text-nav: clamp(0.9375rem, 2.2vw, 2rem); /* 32px */ /* Decorative scale - Brown Sugar */ --roya-text-watermark: clamp(3.5rem, 16.7vw, 15rem); /* 240px */ --roya-text-watermark-sm: clamp(3rem, 14.8vw, 13.3125rem); /* 213px */ --roya-text-display: clamp(2.5rem, 10.4vw, 9.375rem); /* 150px */ --roya-text-vertical: clamp(2rem, 8.3vw, 7.5rem); /* 120px */ --roya-text-script: clamp(1.75rem, 5.6vw, 5rem); /* 80px */ --roya-text-meta: clamp(0.875rem, 1.4vw, 1.25rem); /* 20px */ /* Line height - not specified in the design, chosen for Hebrew legibility */ --roya-leading-tight: 1.1; --roya-leading-normal: 1.4; --roya-leading-relaxed: 1.6; /* Paragraph spacing, read from the design */ --roya-paragraph-gap: 40px; --roya-paragraph-gap-display: 15px; /* Letter spacing - the three vertical service labels each differ */ --roya-tracking-consulting: 0.07em; --roya-tracking-furnitures: 0.1em; --roya-tracking-kitchens: 0.28em; /* ========================================================================== Spacing The design has no Auto Layout, so no spacing scale exists in Figma. This 8px-based scale is ours (D-05). ========================================================================== */ --roya-space-1: 0.5rem; /* 8px */ --roya-space-2: 1rem; /* 16px */ --roya-space-3: 1.5rem; /* 24px - nav gap in the design */ --roya-space-4: 2rem; /* 32px */ --roya-space-5: 3rem; /* 48px */ --roya-space-6: 4rem; /* 64px */ --roya-space-7: 6rem; /* 96px */ --roya-space-8: 8rem; /* 128px */ /* Per side; two adjacent sections total ~110px at desktop (client note). */ --roya-section-gap: clamp(2rem, 3.8vw, 3.4375rem); /* ========================================================================== Shape ========================================================================== */ --roya-radius-card: 20px; /* soft corner - the footer photograph, and the only one in the design (measured from node 18:247, D-24) */ --roya-radius-pill: 50px; /* buttons */ --roya-radius-pill-header: 36px; /* the header's booking pill only - it is the one pill in the design that is not 50px, and its stroke is 1px cream rather than 2px light-brown (D-19, F-1) */ --roya-radius-arch: 220px; /* project cards - an arch, not a rounded corner */ --roya-radius-circle: 50%; --roya-border-width: 2px; /* button and card outlines */ --roya-rule-width: 3px; /* section divider rules */ /* ========================================================================== Layout ========================================================================== */ --roya-canvas: 1440px; /* the design canvas width */ --roya-container: 1230px; /* inner content width, from the form */ --roya-gutter: clamp(1rem, 4vw, 3rem); /* ========================================================================== Component sizing Fluid, with the max matching the design. ========================================================================== */ --roya-button-height: clamp(3rem, 5.3vw, 4.75rem); /* 76px */ --roya-submit-height: clamp(3.5rem, 6.9vw, 6.1875rem); /* 99px */ --roya-social-size: clamp(3.5rem, 8.1vw, 7.25rem); /* 116px */ --roya-icon-size: clamp(2rem, 3.5vw, 3.125rem); /* 50px */ /* ========================================================================== Motion Not defined in the design (docs/01-design-system.md section 6). ========================================================================== */ --roya-transition: 200ms ease; --roya-transition-slow: 400ms ease; }