/* ============================================================ * Hotel More — Design tokens (Mediterranean Serenity) * ---------------------------------------------------------- * Sloj 1: izvorni tokeni (--ms-*, --font-*, --space-*, …) * Sloj 2: legacy aliasi (--accent, --card-bg, …) — mapiraju * postojeća imena na nove tokene tako da postojeći CSS * nastavi raditi bez izmjena. Migraciju u nove nazive * radimo postupno u D2. * * Paleta — Mediterranean Serenity (Stitch prijedlog, 2026-05): * Primary #0D3B4C deep teal (jadransko more, navy) * Secondary #C5A059 warm gold (toplo zlato, akcent) * Tertiary #4D300A deep walnut (mediteransko drvo) * Neutral #E6E2D3 cream (kamen, vapno) * * Tipografija: * Headlines/brand : "Playfair Display" (italic za serif accent) * Body/labels : "Manrope" * ============================================================ */ :root { /* ---------- 1. Brand paleta (Mediterranean Serenity) ---------- */ --ms-primary: #0D3B4C; --ms-primary-hover: #0A2F3D; --ms-primary-soft: rgba(13, 59, 76, 0.12); --ms-primary-softer: rgba(13, 59, 76, 0.06); --ms-primary-on: #FFFFFF; /* tekst na primary plohi */ --ms-secondary: #C5A059; /* gold */ --ms-secondary-hover: #A88445; --ms-secondary-soft: rgba(197, 160, 89, 0.18); --ms-secondary-softer: rgba(197, 160, 89, 0.08); --ms-secondary-on: #1F1606; --ms-tertiary: #4D300A; /* walnut */ --ms-tertiary-hover: #3A2407; --ms-tertiary-soft: rgba(77, 48, 10, 0.12); --ms-tertiary-on: #F7EFE2; --ms-neutral: #E6E2D3; /* cream */ --ms-neutral-warm: #F2EFE5; --ms-neutral-cool: #DBD7C7; /* ---------- 2. Površine i kontrast ---------- */ --ms-surface: #FFFFFF; /* kartica */ --ms-surface-2: #F7F4EC; /* sekundarna kartica / hover */ --ms-surface-3: #EEE9DA; /* tihi info blok */ --ms-bg: #FAF8F2; /* pozadina app-a (cream-warmer) */ --ms-bg-grad: linear-gradient(180deg, #FAF8F2 0%, #F0EBDB 100%); --ms-text: #14222C; /* high contrast na cream */ --ms-text-muted: #4F5C66; --ms-text-soft: #7A8590; --ms-text-on-primary: #F7EFE2; /* za stop u gradijentima */ --ms-border: #E3DDC9; --ms-border-strong: #C9C0A4; --ms-divider: rgba(20, 34, 44, 0.08); /* ---------- 3. Status (5 unified) ---------- */ /* Poslano / U pripremi / Dostava u tijeku / Dovršeno / Otkazano */ --ms-status-sent: #3B6A8C; /* steel-blue — neutralno-aktivno */ --ms-status-sent-soft: rgba(59, 106, 140, 0.14); --ms-status-prep: #C5A059; /* gold — radi se */ --ms-status-prep-soft: rgba(197, 160, 89, 0.18); --ms-status-delivering: #1E7A6E; /* teal-green — u pokretu */ --ms-status-delivering-soft: rgba(30, 122, 110, 0.16); --ms-status-done: #2F8F4E; /* green — uspjeh */ --ms-status-done-soft: rgba(47, 143, 78, 0.14); --ms-status-cancelled: #94432F; /* terracotta — otkazano */ --ms-status-cancelled-soft: rgba(148, 67, 47, 0.14); /* ---------- 4. Servisne boje (DND / MMR / klima / requesti) ---------- */ --ms-service-dnd: #6B5B95; --ms-service-dnd-hover: #574978; --ms-service-dnd-soft: rgba(107, 91, 149, 0.15); --ms-service-makeup: #A65D5D; --ms-service-makeup-hover: #884B4B; --ms-service-makeup-soft: rgba(166, 93, 93, 0.14); --ms-service-climate: #0E7DB1; --ms-service-climate-soft: rgba(14, 125, 177, 0.16); --ms-service-request: #2F8F4E; --ms-service-request-hover: #266F3D; /* ---------- 5. Feedback (alert / info) ---------- */ --ms-info: #3B6A8C; --ms-info-soft: rgba(59, 106, 140, 0.12); --ms-warning: #C58A2A; --ms-warning-soft: rgba(197, 138, 42, 0.16); --ms-danger: #B0432E; --ms-danger-soft: rgba(176, 67, 46, 0.14); /* ---------- 6. Tipografija ---------- */ --font-serif: "Playfair Display", "Noto Serif", Georgia, "Times New Roman", serif; --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semi: 600; --font-weight-bold: 700; /* Skala (kompaktna — guest app je mobile-first): 12 / 13 / 14 / 15 / 16 / 18 / 20 / 24 / 28 / 32 / 40 */ --font-size-xs: 0.75rem; /* 12 */ --font-size-sm: 0.8125rem; /* 13 */ --font-size-base: 0.875rem; /* 14 */ --font-size-md: 0.9375rem; /* 15 */ --font-size-lg: 1rem; /* 16 — body default */ --font-size-xl: 1.125rem; /* 18 */ --font-size-2xl: 1.25rem; /* 20 */ --font-size-3xl: 1.5rem; /* 24 — section title */ --font-size-4xl: 1.75rem; /* 28 — page title */ --font-size-5xl: 2rem; /* 32 */ --font-size-6xl: 2.5rem; /* 40 — brand display */ --line-height-tight: 1.2; --line-height-snug: 1.35; --line-height-normal: 1.5; --line-height-relaxed: 1.65; --letter-spacing-tight: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; --letter-spacing-wider: 0.08em; /* kapiteli, mali labeli */ /* ---------- 7. Spacing (4-px scale) ---------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-7: 2rem; /* 32 */ --space-8: 2.5rem; /* 40 */ --space-9: 3rem; /* 48 */ --space-10: 4rem; /* 64 */ /* ---------- 8. Radii ---------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px; --radius-card: var(--radius-lg); /* ---------- 9. Sjenke (tople, mediteranske — nikako plave) ---------- */ --shadow-xs: 0 1px 2px rgba(31, 24, 12, 0.06); --shadow-sm: 0 2px 6px rgba(31, 24, 12, 0.08); --shadow-md: 0 4px 14px rgba(31, 24, 12, 0.10); --shadow-lg: 0 10px 32px rgba(31, 24, 12, 0.14); --shadow-xl: 0 20px 48px rgba(31, 24, 12, 0.18); --shadow-focus: 0 0 0 3px rgba(197, 160, 89, 0.45); /* gold focus ring */ /* ---------- 10. Z-index ---------- */ --z-base: 1; --z-sticky: 100; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; /* ---------- 11. Layout invarijante ---------- */ --layout-max-width: 480px; --touch-min: 48px; /* ---------- 12. Tranzicije ---------- */ --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --easing-out: cubic-bezier(0.16, 1, 0.3, 1); --easing-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* ============================================================ * Sloj 2 — legacy aliasi. * Postojeći CSS (styles.css, home.css, order.css, spa.css, boost.css) * koristi ove nazive. Mapiramo ih na nove tokene tako da migracija * može teći postupno bez "big bang" izmjene. * ============================================================ */ :root { /* pozadina + osnovni kontrast */ --bg: var(--ms-bg-grad); --bg-solid: var(--ms-bg); --card-bg: var(--ms-surface); --card-border: var(--ms-border); --text: var(--ms-text); --text-muted: var(--ms-text-muted); --border: var(--ms-border); /* brand akcent (stara navy ~ #1e3a5f → nova deep teal #0D3B4C) */ --accent: var(--ms-primary); --accent-hover: var(--ms-primary-hover); --accent-light: var(--ms-primary-soft); /* gold akcent */ --gold: var(--ms-secondary); --gold-light: var(--ms-secondary-soft); /* servisne boje */ --dnd: var(--ms-service-dnd); --dnd-active: var(--ms-service-dnd-hover); --dnd-light: var(--ms-service-dnd-soft); --makeup: var(--ms-service-makeup); --makeup-active: var(--ms-service-makeup-hover); --makeup-light: var(--ms-service-makeup-soft); --climate: var(--ms-service-climate); --climate-light: var(--ms-service-climate-soft); --request: var(--ms-service-request); --request-active: var(--ms-service-request-hover); /* radii / shadow / touch — stari nazivi */ --radius: var(--radius-md); /* --radius-sm postoji već — istog imena u oba sloja */ --shadow: var(--shadow-sm); --shadow-hover: var(--shadow-md); }