/* ============================================================================= tokens.css — Design tokens (sursa unică de adevăr pentru stil) ----------------------------------------------------------------------------- Aici se schimbă culorile, fonturile și spațierile pentru TOT proiectul. Accentul de culoare se schimbă automat în funcție de ocazie prin atributul [data-ocazie="nunta|botez|cumatrie"] pus pe sau pe o secțiune. ============================================================================= */ :root { /* ---- Paletă neutră caldă (baza, identică pe toate ocaziile) ---------------- */ --c-ivory: #faf7f2; /* fundal principal, „hârtie" */ --c-cream: #f3ede3; /* fundal secundar / carduri */ --c-sand: #e7ddcd; /* borduri fine, separatoare */ --c-taupe: #b8a890; /* text mut, detalii */ --c-charcoal: #2b2622; /* text principal */ --c-ink: #16130f; /* titluri, contrast maxim */ --c-white: #ffffff; /* ---- Accent implicit (suprascris de data-ocazie) -------------------------- */ --accent: #b76e79; /* roz-auriu (nuntă, default) */ --accent-soft: #e9c9cd; --accent-deep: #8c4a54; --accent-contrast:#ffffff; /* text peste accent */ /* ---- Semantic ------------------------------------------------------------- */ --bg: var(--c-ivory); --bg-alt: var(--c-cream); --surface: var(--c-white); --border: var(--c-sand); --text: var(--c-charcoal); /* text secundar accesibil (~4.7:1 pe ivory, WCAG AA). --c-taupe rămâne doar pentru detalii decorative — era prea deschis (2.2:1) pentru text de citit. */ --text-soft: #7a6a54; --heading: var(--c-ink); --success: #3f7d54; --danger: #b4453d; --warning: #c08a2d; /* ---- Tipografie ----------------------------------------------------------- */ --font-display: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Scală fluidă (clamp): se adaptează între mobil și desktop fără media queries */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem); --fs-sm: clamp(0.85rem, 0.82rem + 0.2vw, 0.95rem); --fs-base: clamp(1rem, 0.96rem + 0.25vw, 1.12rem); --fs-md: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem); --fs-lg: clamp(1.45rem, 1.25rem + 1vw, 2rem); --fs-xl: clamp(2rem, 1.6rem + 2vw, 3.2rem); --fs-2xl: clamp(2.6rem, 2rem + 3.2vw, 4.8rem); --fs-3xl: clamp(3.2rem, 2.2rem + 5vw, 6.5rem); --lh-tight: 1.08; --lh-snug: 1.25; --lh-normal: 1.55; --tracking-wide: 0.14em; /* pentru eyebrow-uri / label-uri majuscule */ /* ---- Spațiere (scală 4px) ------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --section-y: clamp(3.5rem, 8vw, 7rem); /* padding vertical de secțiune */ --gutter: clamp(1.1rem, 5vw, 2.5rem); /* margine laterală mobil/desktop */ --maxw: 1180px; /* lățime maximă conținut */ --maxw-narrow: 720px; /* ---- Radii ---------------------------------------------------------------- */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px; /* ---- Umbre (calde, nu negre pure) ----------------------------------------- */ --sh-sm: 0 1px 2px rgba(43, 38, 34, 0.06), 0 2px 6px rgba(43, 38, 34, 0.05); --sh-md: 0 4px 12px rgba(43, 38, 34, 0.08), 0 12px 28px rgba(43, 38, 34, 0.08); --sh-lg: 0 12px 30px rgba(43, 38, 34, 0.12), 0 30px 60px rgba(43, 38, 34, 0.12); --sh-accent: 0 10px 30px -8px var(--accent); /* ---- Tranziții / easing --------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1); --t-fast: 160ms; --t-base: 280ms; --t-slow: 520ms; /* ---- Layering ------------------------------------------------------------- */ --z-base: 1; --z-sticky: 100; --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200; } /* ============================================================================= ACCENTE PE OCAZIE — schimbă doar variabilele --accent* Pune data-ocazie="..." pe (invitație) sau pe secțiune (landing). ============================================================================= */ [data-ocazie="nunta"] { --accent: #b76e79; /* roz-auriu elegant */ --accent-soft: #efd4d8; --accent-deep: #8c4a54; --accent-contrast: #ffffff; } [data-ocazie="botez"] { --accent: #7fa9a6; /* verde-bleu fraged */ --accent-soft: #d3e6e3; --accent-deep: #4f7e7a; --accent-contrast: #ffffff; } [data-ocazie="cumatrie"] { --accent: #9a3b3b; /* bordo tradițional */ --accent-soft: #e7c9a8; /* auriu cald pentru detalii */ --accent-deep: #6e2727; --accent-contrast: #fdf6ea; } /* ============================================================================= Reduced motion: dezactivează animațiile costisitoare global. ============================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; } }