/* ========================================================================== Coris Bulgaria — design tokens (redesign v2, "Lovable" look) -------------------------------------------------------------------------- Visual language taken from the Lovable prototype (github.com/level-cell/modern-coris-redesign, src/coris.css): warm sand backgrounds, brown chrome, teal brand, green pill CTAs, orange highlights, Sora + Manrope typography, large rounded cards. Colours are copied EXACTLY from Lovable by decision of the owner; several pairs fail WCAG AA — see DESIGN.md §2.3 for the list. Token NAMES are the same as v1, so components.css works unchanged. Load order: fonts.css → tokens.css → base.css → layout.css → components.css → pages/*.css ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1. Brand palette (Lovable, verbatim) ------------------------------------------------------------------------ */ --coris-teal: #12908e; --coris-teal-dark: #0b6d6b; --coris-orange: #f08a1c; --coris-green: #12908e; /* was #8cb61e; original kept in .home-about (pages/home.css) */ --coris-green-dark: #0b6d6b; /* was #6f9412; original kept in .home-about (pages/home.css) */ --coris-sand: #ded8ce; --coris-sand-light: #f4f1ec; --coris-brown: #4b4438; /* Derived tints (alpha of the brand colours) */ --coris-teal-10: rgba(18, 144, 142, 0.1); --coris-green-12: rgba(18, 144, 142, 0.14); --coris-orange-12: rgba(240, 138, 28, 0.14); --coris-brown-08: rgba(75, 68, 56, 0.08); --coris-brown-25: rgba(75, 68, 56, 0.25); --coris-sand-20: rgba(222, 216, 206, 0.2); --white: #ffffff; --grey-secondary: #6c757d; /* Bootstrap .text-secondary, used by Lovable for card text */ --grey-border: #e4ded4; --grey-input: #8f8676; /* form control borders, 3.4:1 on white */ /* Status (kept from v1 — Lovable defines none; all ≥ 4.5:1) */ --status-success: #3b6b00; --status-success-bg: #f1f8e6; --status-warning: #8a4b00; --status-warning-bg: #fff6e5; --status-error: #b42318; --status-error-bg: #fef3f2; --status-info: #0b6d6b; --status-info-bg: #e3f2f1; /* ------------------------------------------------------------------------ 2. Semantic roles — use THESE in components ------------------------------------------------------------------------ */ --color-primary: var(--coris-teal); --color-primary-hover: var(--coris-teal-dark); --color-primary-strong: var(--coris-teal-dark); --color-primary-subtle: var(--coris-teal-10); --color-on-primary: var(--white); --color-secondary: var(--coris-green-dark); --color-secondary-subtle: var(--coris-green-12); --color-secondary-deco: var(--coris-green); /* Primary CTA = Lovable .btn-coris: green pill, white text */ --color-accent: var(--coris-green); --color-accent-hover: var(--coris-green-dark); --color-on-accent: var(--white); /* Highlight = Lovable orange: eyebrows, nav hover/active, tile hover, top-bar phone */ --color-highlight: var(--coris-orange); --color-on-highlight: var(--white); --color-highlight-inverse: #fff3b0; /* highlight on dark areas (.u-inverse, .hero) */ --color-highlight-subtle: var(--coris-orange-12); --color-text: var(--coris-brown); --color-text-secondary: var(--grey-secondary); --color-text-muted: var(--grey-secondary); --color-link: var(--coris-teal); --color-link-hover: var(--coris-teal-dark); --color-bg: var(--coris-sand-light); --color-bg-alt: var(--white); --color-bg-sunken: var(--coris-sand); --color-surface: var(--white); --color-border: var(--grey-border); --color-border-strong: var(--grey-input); /* Dark chrome: top bar, footer, page header, hero overlay */ --color-inverse-bg: var(--coris-brown); --color-inverse-bg-deep: var(--coris-brown); --color-inverse-text: var(--white); --color-inverse-muted: var(--coris-sand); --color-inverse-accent: var(--coris-green); --color-inverse-border: var(--coris-sand-20); --color-inverse-hover: rgba(255, 255, 255, 0.1); --color-inverse-subtle: rgba(255, 255, 255, 0.12); /* Teal brand panel (About) */ --color-brand-panel: var(--coris-teal); --color-on-brand-panel: var(--white); --color-brand-panel-stat: var(--coris-green); /* Hero photo overlay (Lovable .hero::before) */ --hero-overlay: linear-gradient(90deg, rgba(75, 68, 56, 0.92) 0%, rgba(75, 68, 56, 0.6) 45%, rgba(75, 68, 56, 0) 75%); --hero-overlay-mobile: linear-gradient(180deg, rgba(75, 68, 56, 0.9) 0%, rgba(75, 68, 56, 0.82) 100%); /* CTA band (Lovable .cta-band) */ --cta-band-bg: linear-gradient(120deg, var(--coris-green), var(--coris-green-dark)); --color-success: var(--status-success); --color-success-bg: var(--status-success-bg); --color-warning: var(--status-warning); --color-warning-bg: var(--status-warning-bg); --color-error: var(--status-error); --color-error-bg: var(--status-error-bg); --color-info: var(--status-info); --color-info-bg: var(--status-info-bg); --color-focus: var(--coris-teal-dark); /* 6.15:1 on white */ --color-focus-inverse: var(--coris-orange); /* 3.83:1 on brown (non-text ≥ 3:1) */ --color-pulse: rgba(18, 144, 142, 0.55); --color-pulse-end: rgba(18, 144, 142, 0); /* ------------------------------------------------------------------------ 3. Typography — self-hosted (see css/fonts.css), no external services Sora has no Cyrillic: Bulgarian headings fall back to Manrope per glyph. ------------------------------------------------------------------------ */ --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif; --font-display: "Sora", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace; --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px top bar, small */ --fs-nav: 0.8rem; /* 12.8px uppercase nav (Lovable) */ --fs-base: 1rem; /* 16px body */ --fs-md: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); /* 17 → 20px lead / check list */ --fs-lg: 1.25rem; /* 20px h3 / card title (Bootstrap .h5) */ --fs-xl: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); /* 28 → 40px h2 (Bootstrap .display-6) */ --fs-2xl: clamp(2.4rem, 5vw, 4rem); /* 38 → 64px h1 (Lovable hero) */ --fs-phone: clamp(1.8rem, 4vw, 2.8rem); /* CTA band phone (Lovable) */ --fs-stat: 2.5rem; /* About panel stats */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.6; --ls-heading: -0.02em; --ls-nav: 0.06em; --ls-eyebrow: 0.12em; --measure: 68ch; /* ------------------------------------------------------------------------ 4. Spacing — 4px base scale (unchanged from v1) ------------------------------------------------------------------------ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --section-space: clamp(3rem, 2rem + 4vw, 5.5rem); --gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem); --container: 80rem; /* 1280px (≈ Bootstrap xxl container) */ --container-narrow: 48rem; --header-h: 5rem; --hero-min-h: 40rem; /* 640px (Lovable) */ /* ------------------------------------------------------------------------ 5. Radius, borders, shadows (Lovable) ------------------------------------------------------------------------ */ --radius-sm: 0.375rem; --radius-md: 1rem; /* icon tiles */ --radius-lg: 1.25rem; /* cards, product tiles */ --radius-xl: 1.5rem; /* About panel, CTA band */ --radius-pill: 999px; /* all buttons */ --border-w: 1px; --border-w-strong: 2px; --shadow-sm: 0 1px 2px var(--coris-brown-08); --shadow-md: 0 2px 20px var(--coris-brown-08); /* sticky navbar */ --shadow-lg: 0 20px 40px -15px var(--coris-brown-25); /* card hover, drop-downs */ --focus-ring: 0 0 0 3px var(--color-focus); --focus-offset: 3px; /* ------------------------------------------------------------------------ 6. Motion ------------------------------------------------------------------------ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 150ms; --dur-base: 250ms; /* Lovable card transition .25s */ --dur-slow: 480ms; --lift-hover: -6px; /* Lovable card hover translateY */ /* ------------------------------------------------------------------------ 7. Layers ------------------------------------------------------------------------ */ --z-header: 50; --z-dropdown: 60; --z-drawer: 70; --z-skip: 100; /* 8. Breakpoints (documentation only): sm 30em · md 48em · lg 64em · xl 80em */ } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --lift-hover: 0px; } }