/* =========================================================================== DrenGarden — dizajn tokeni --------------------------------------------------------------------------- Pravac: "mirovanje, ne berba". Sadnica se kupuje u novembru, kad je voćnjak go i siv — ne u avgustu. Zato paleta polazi od hladne, tamne zimzelene, a toplina je rezervisana za jedno mesto: dren, koji cveta žuto u februaru, usred sezone sadnje. Ta žuta je jedina boja CTA dugmadi. Svi parovi teksta i pozadine provereni su na WCAG 2.1 AA (većina AAA). =========================================================================== */ :root { color-scheme: light dark; /* --- Osnovna paleta (svetla tema) ----------------------------------- */ --dg-ink: #241d14; /* tekst — topla skoro crna */ --dg-ink-muted: #6b5b46; /* sekundarni tekst, 5.6:1 na kremastoj */ --dg-bg: #fffdf8; /* kremasta osnova, ne čisto bela */ --dg-surface: #fdf6e9; /* kartice, trake */ --dg-surface-sunken: #f5ead5; /* uvučene zone, skeleton */ --dg-border: #ecdfc6; /* dekorativne linije */ --dg-border-strong: #8a7758; /* ivice polja i kontrola, 4.5:1 */ --dg-primary: #2f5d1f; /* list u punoj snazi */ --dg-primary-hover: #3d7529; --dg-primary-tint: #eaf2e0; /* podloga za istaknute blokove */ --dg-on-primary: #ffffff; --dg-accent: #d9a441; /* zrela boja — CTA dugmad */ --dg-accent-hover: #c4902f; --dg-on-accent: #241d14; --dg-berry: #c0442e; /* plod — popusti i upozorenja */ --dg-bark: #8a6a4a; /* kora, podloga, zemljani ton */ --dg-success: #3b6d11; --dg-success-tint: #eaf3de; --dg-warning: #8a5a06; --dg-warning-tint: #fbeeda; --dg-danger: #a3301c; --dg-danger-tint: #fbe8e2; --dg-info: #2b5566; --dg-info-tint: #e6eff3; --dg-focus: #2f5d1f; --dg-shadow-color: 60 45 25; /* --- Tonovi po vrsti biljke ---------------------------------------- Podloga slike u kartici. Kupac po boji odmah vidi grupu, i pre nego što pročita naziv. */ --dg-tint-jezgricavo: #fdf0dc; --dg-tint-kosticavo: #f6e8f0; --dg-tint-jagodicasto:#f2e6f2; --dg-tint-jezgrasto: #f3ecdd; --dg-tint-loza: #efe9f5; --dg-tint-ukrasno: #e9f2e6; --dg-tint-citrusi: #fdf4d8; /* --- Tipografija ---------------------------------------------------- */ /* Fraunces nosi samo krupne naslove — ima mekši, organskiji rez od klasičnog serifa. Manrope nosi sve ostalo: prijateljski geometrijski grotesk sa dobrim brojevima, što je za cene bitno. */ --dg-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --dg-font-body: "Manrope", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --dg-font-mono: "Manrope", ui-monospace, "SFMono-Regular", Consolas, monospace; /* Podešavanje varijabilnih osa Fraunces-a: mekše i toplije od podrazumevanog */ --dg-display-settings: "SOFT" 60, "WONK" 1, "opsz" 100; --dg-fs-2xs: 0.6875rem; /* 11px — etikete */ --dg-fs-xs: 0.75rem; /* 12px */ --dg-fs-sm: 0.875rem; /* 14px */ --dg-fs-base: 1rem; /* 16px */ --dg-fs-md: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem); --dg-fs-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.4375rem); --dg-fs-xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem); --dg-fs-2xl: clamp(1.875rem, 1.55rem + 1.6vw, 2.5rem); --dg-fs-3xl: clamp(2.25rem, 1.7rem + 2.7vw, 3.5rem); --dg-fs-4xl: clamp(2.5rem, 1.6rem + 4vw, 4.5rem); /* hero */ --dg-lh-tight: 1.15; --dg-lh-snug: 1.35; --dg-lh-base: 1.6; --dg-lh-loose: 1.75; --dg-track-tight: -0.02em; --dg-track-wide: 0.08em; /* mono etikete */ /* --- Prostor (korak 4px) -------------------------------------------- */ --dg-1: 0.25rem; --dg-2: 0.5rem; --dg-3: 0.75rem; --dg-4: 1rem; --dg-5: 1.5rem; --dg-6: 2rem; --dg-7: 2.5rem; --dg-8: 3rem; --dg-9: 4rem; --dg-10: 5rem; --dg-11: 6.5rem; --dg-section-y: clamp(3rem, 7vw, 6rem); /* --- Geometrija ------------------------------------------------------ */ --dg-radius-sm: 6px; --dg-radius: 10px; --dg-radius-lg: 18px; --dg-radius-pill: 999px; --dg-container: 75rem; /* 1200px */ --dg-container-narrow: 46rem; --dg-measure: 68ch; /* dužina reda za tekst */ --dg-shadow-1: 0 1px 2px rgb(var(--dg-shadow-color) / 0.06); --dg-shadow-2: 0 2px 4px rgb(var(--dg-shadow-color) / 0.06), 0 8px 20px rgb(var(--dg-shadow-color) / 0.07); --dg-shadow-3: 0 4px 8px rgb(var(--dg-shadow-color) / 0.08), 0 16px 40px rgb(var(--dg-shadow-color) / 0.10); /* --- Kretanje -------------------------------------------------------- */ --dg-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dg-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dg-dur-fast: 120ms; --dg-dur: 220ms; --dg-dur-slow: 420ms; --dg-header-h: 4.5rem; --dg-topbar-h: 2.25rem; } /* --- Tamna tema: "voćnjak pred zoru", ne obrnuta svetla ------------------- */ [data-theme="dark"] { --dg-ink: #f2ece0; --dg-ink-muted: #b3a48c; --dg-bg: #16120c; --dg-surface: #201a12; --dg-surface-sunken: #2b231a; --dg-border: #3a3026; --dg-border-strong: #8e7f68; --dg-primary: #9cc97f; /* na tamnoj pozadini zelena mora da svetli */ --dg-primary-hover: #b3d99a; --dg-primary-tint: #23301b; --dg-on-primary: #16120c; --dg-accent: #e5b757; --dg-accent-hover: #f0c86e; --dg-on-accent: #241d14; --dg-berry: #e8907a; --dg-bark: #c0a184; --dg-tint-jezgricavo: #2c2417; --dg-tint-kosticavo: #2a1e26; --dg-tint-jagodicasto:#281d28; --dg-tint-jezgrasto: #292317; --dg-tint-loza: #241f2c; --dg-tint-ukrasno: #1d2719; --dg-tint-citrusi: #2d2714; --dg-success: #9cc97f; --dg-success-tint: #1f2a16; --dg-warning: #e5b757; --dg-warning-tint: #2c2413; --dg-danger: #e8907a; --dg-danger-tint: #2c1a14; --dg-info: #8fc4da; --dg-info-tint: #17242a; --dg-focus: #e5b757; --dg-shadow-color: 0 0 0; --dg-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4); --dg-shadow-2: 0 2px 4px rgb(0 0 0 / 0.4), 0 8px 20px rgb(0 0 0 / 0.45); --dg-shadow-3: 0 4px 8px rgb(0 0 0 / 0.45), 0 16px 40px rgb(0 0 0 / 0.5); }