/* ═══════════════════════════════════════════════════════════ PATHURA — tokens.css Design Tokens (:root). Moved verbatim from base.css during Phase 6 — every custom property, value, and comment below is byte-for-byte identical to the original. ═══════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────── 2. DESIGN TOKENS ─────────────────────────────────────────────────────────── */ :root { /* ========================= COLORS ========================= */ --bg: rgba(239, 252, 253, 0.95); --surface: #FFFFFF; --surface-2: #F2EFE9; --text: #111111; --text-muted: #5F5F5F; /* Alias for var(--bg) when it is used as a light/inverse text color on dark surfaces (hero, footer, toast, trust bar) — keeps the semantic intent explicit while staying pixel-identical. */ --text-inverse: var(--bg); --primary: #EC5D10; --primary-hover: #A85722; --secondary: #2D2D2D; --accent: #D9B67A; --border: #E7E2DA; --success: #2E7D32; --warning: #D69E2E; --danger: #C0392B; /* ========================= TYPOGRAPHY ========================= */ --font-display: 'Syne', sans-serif; --font-body: 'Inter', sans-serif; --fs-base: 15px; --lh-base: 1.6; /* ========================= LAYOUT ========================= */ --max-width-page: 1440px; --max-width-pd: 1100px; --nav-h: 62px; --subnav-height: 48px; --z-subnav: 190; --z-navbar: 300; --z-overlay: 300; --z-drawer: 301; --z-toast: 400; /* ========================= SPACING ========================= */ --space-page-x: 2rem; --space-page-x-tablet: 1.25rem; --space-page-x-mobile: 1rem; /* ========================= RADIUS ========================= */ --r: 6px; --r-lg: 10px; --r-pill: 999px; /* ========================= SHADOWS ========================= */ --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 4px 12px rgba(0,0,0,.12); --shadow-lg: 0 12px 32px rgba(0,0,0,.16); --shadow-primary: 0 10px 22px rgba(229,66,12,.32); --card-shadow: 0 1px 2px rgba(13,13,13,.05), 0 1px 1px rgba(13,13,13,.04); --card-shadow-hover: 0 22px 36px -12px rgba(13,13,13,.18), 0 8px 16px -8px rgba(13,13,13,.10); /* ========================= ANIMATION ========================= */ --ease: cubic-bezier(.22,1,.36,1); --ease-sharp: cubic-bezier(.4,0,.2,1); --transition-fast: .18s; --transition-base: .25s; --transition-slow: .35s; /* ========================= BUTTONS ========================= */ --btn-radius: var(--r); --btn-font: var(--font-body); --btn-transition: background var(--transition-base) var(--ease), transform var(--transition-base) var(--ease), box-shadow var(--transition-base) var(--ease), border-color var(--transition-base) var(--ease), color var(--transition-base) var(--ease); /* ========================= FORMS ========================= */ --input-radius: var(--r); --input-transition: border-color var(--transition-base) var(--ease); /* ========================= CARDS ========================= */ --card-bg: var(--surface-2); --card-radius: var(--r-lg); --card-transition: transform var(--transition-slow) var(--ease), box-shadow var(--transition-slow) var(--ease), background var(--transition-base) ease; /* ========================= PRIMARY NAVBAR ========================= */ --nav-bg: rgba(239,252,253,.95); --nav-bg-scrolled: rgba(239,252,253,.98); --nav-border: rgba(0,0,0,.08); --nav-text: #262626; --nav-text-hover: var(--primary); --nav-icon: #666666; --nav-search-bg: #FFFFFF; --nav-search-border: #D8D8D8; --nav-search-placeholder: #8B8B8B; --nav-glass-blur: 18px; --nav-action-radius: var(--r); --nav-action-gap: 6px; --nav-action-hover-bg: var(--nav-border); --nav-search-height: 40px; --nav-search-radius: var(--r-pill); --nav-search-width: 340px; --nav-focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); /* ========================= SECONDARY NAVBAR ========================= */ --subnav-bg: rgba(196,106,45,.14); --subnav-bg-scrolled: rgba(196,106,45,.20); --subnav-border: rgba(196,106,45,.18); --subnav-text: #5B3114; --subnav-text-hover: #111111; --subnav-blur: 18px; --subnav-font-size: 13px; --subnav-hover-bg: rgba(255,255,255,.12); --subnav-active-bg: rgba(255,255,255,.16); --subnav-pill-bg: var(--primary); --subnav-pill-hover: var(--primary-hover); --subnav-pill-text: #FFFFFF; /* ========================= HERO ========================= */ --hero-bg: var(rgba(239, 252, 253, 0.95);); --hero-panel-bg: var(--secondary); --hero-heading: var(--text-inverse); /* ========================= HERO — LEFT CONTENT ========================= */ --hero-badge-bg: color-mix(in srgb, var(--primary) 8%, var(--surface)); --hero-badge-border: color-mix(in srgb, var(--primary) 22%, transparent); --hero-badge-text: var(--primary-hover); --hero-heading-color: var(--text); --hero-desc-color: var(--text-muted); --hero-btn-primary-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 30%, transparent); --hero-trust-icon-bg: var(--surface-2); --hero-trust-text: var(--text-muted); --hero-divider: var(--border); /* ========================= HERO — BANNER SLIDES (image-only marketing banners — all copy/CTA/badge graphics live inside the banner image itself, supplied by the Admin Panel; these tokens only cover the frame) ========================= */ --hero-banner-skeleton-bg: var(--surface-2); --hero-banner-hover-scale: 1.025; /* ========================= HERO THEME ENGINE (Version 1 — foundation only. These tokens are the contract the Admin Panel will write to later: Theme Name, Desktop/Mobile Background, Gradient, Pattern, Overlay Color/Opacity, Theme Status. Defaults below render the Hero exactly as before — a plain surface, no gradient, no image, no pattern, no overlay.) ========================= */ /* -- Background -- */ --hero-theme-bg-color: var(--surface); --hero-theme-bg-gradient: none; --hero-theme-bg-image: none; /* -- Pattern -- */ --hero-theme-pattern-image: none; --hero-theme-pattern-size: 24px; --hero-theme-pattern-opacity: 1; /* -- Overlay -- */ --hero-theme-overlay-color: var(--text); --hero-theme-overlay-opacity: 0; /* ========================= HERO THEME LAYER (Version 2) Optional seasonal/campaign "theme pack" that sits above the base Hero background and below the Hero content — independent from the Version 1 tokens above. Admin fields: Theme Name, Enabled/Disabled, Background/Pattern/ Decoration/Effect Asset. All default to "none" so nothing renders until a theme is assigned and enabled. ========================= */ /* -- Theme Pack: Background Asset -- */ --hero-themepack-asset-image: none; --hero-themepack-asset-size: cover; --hero-themepack-asset-position: center; /* -- Theme Pack: Pattern -- */ --hero-themepack-pattern-image: none; --hero-themepack-pattern-size: 24px; --hero-themepack-pattern-opacity: 1; /* -- Theme Pack: Decoration (SVG / PNG) -- */ --hero-themepack-decoration-image: none; --hero-themepack-decoration-size: contain; --hero-themepack-decoration-position: bottom right; /* ========================= PRODUCT CARDS ========================= */ --pcard-bg: var(--card-bg); --pcard-bg-hover: var(--border); --pcard-img-bg: var(--border); --pcard-radius: var(--card-radius); /* ========================= FOOTER ========================= */ --footer-bg: var(--text); --footer-text: var(--text-muted); --footer-heading: var(--text-muted); }