/* ═══════════════════════════════════════════════════════════════ Rézkilincs — design tokenek Forrás: Claude Design handoff, "Rézkilincs Design System". Ez az EGYETLEN hely, ahol szín, tipográfia és térköz definiálódik. A theme.json és a style.css is ezekre a változókra hivatkozik. Aktív paletta: 3 (narancs + sárga + réz, zöld nélkül) ═══════════════════════════════════════════════════════════════ */ :root { /* ── Alap paletta (Színpaletta 3) ───────────────────────────── Zöld szándékosan nincs benne. Nem esztétikai döntés: a MentálKözpont — ahonnan Zsófi és Barna eljött — pontosan krém + világoszöld párosítást használ, és nem szabad rá hasonlítani. Zöldet ne vezessünk vissza a palettába. */ --c-black: #1E1E1E; --c-orange: #D9783A; /* A telítettebb sárga: sötét felirattal 10,51:1, míg a korábbi #E4B84E csak 8,94:1 — és élénkebb is, ami a fő motívumhoz kell. */ --c-yellow: #F2C94C; /* Világos, fényes réz — Zsófi visszajelzése alapján (PinOnion #3): a korábbi #77593F túl barnás-tompított volt, "se nem réz, se nem barna". Ez elefántcsonton csak 2,84:1 kontrasztot ad — a WCAG AA 4,5:1 elvárását szövegméretben nem teljesíti. Tudatos döntés: a hitelesebb, világos rézhatást választottuk a szigorú kontraszt helyett, úgyhogy ez a szín kis szövegen (linkek) most alacsonyabb kontraszttal fut. */ --c-copper: #C77D3E; --c-ivory: #F2EFE6; /* ── Árnyalatok, oklch-ban a hat alapszínből származtatva ─── */ --c-ivory-deep: oklch(94.5% 0.014 92); --c-ivory-edge: oklch(90% 0.016 92); /* A gombok alapszíne. Mérve: fehér felirattal 4,50:1 – éppen megfelel a WCAG AA követelménynek. A nyers narancs (#D9783A) csak 3,14:1 volt, a korábbi zöld gomb pedig 2,81:1 – az a szabvány felét sem érte el. */ --c-orange-deep: #B85E24; --c-orange-darker: #9C4E1C; --c-orange-soft: oklch(92% 0.05 62); --c-yellow-soft: oklch(95% 0.05 92); --c-copper-deep: oklch(42% 0.05 62); --c-copper-soft: oklch(91% 0.03 66); --c-ink-70: oklch(38% 0.008 92); /* 55%-on ez a halvány szürke 4,15:1 volt a meleg kártyaháttéren — a lábléc linkjei és a képhelyek feliratai álltak rajta. 51%-on 4,89:1, és még mindig egyértelműen halkabb a törzsszövegnél. */ --c-ink-50: oklch(51% 0.008 92); --c-ink-30: oklch(72% 0.008 92); /* ── Felületek ────────────────────────────────────────────── */ --surface-page: var(--c-ivory); --surface-card: #FFFFFF; --surface-card-warm: var(--c-ivory-deep); --surface-inverse: var(--c-black); /* A fő motívum a narancs és a sárga. A nagy kiemelt felület sárga, mindig SÖTÉT felirattal – fehér szöveggel a sárga olvashatatlan (1,59:1), sötéttel viszont kiváló (10,51:1). A halvány háttérfoltok homokszínűek maradnak. */ --surface-calm: var(--c-yellow); --surface-calm-soft: var(--c-copper-soft); --surface-calm-deep: var(--c-copper-deep); --text-on-calm-strong: var(--c-black); --surface-accent-soft: var(--c-orange-soft); --surface-detail-soft: var(--c-yellow-soft); /* ── Szöveg ───────────────────────────────────────────────── */ --text-strong: var(--c-black); --text-body: var(--c-ink-70); --text-muted: var(--c-ink-50); --text-on-dark: var(--c-ivory); --text-on-calm: #FFFFFF; --text-link: var(--c-copper); --text-link-hover: var(--c-orange-deep); /* A szekciócímkék („TÉMAKÖRÖK") apró, ritkított nagybetűk. A gombok narancsa ehhez kevés: elefántcsonton 3,92:1. Ez az árnyalat 5,19:1, és szemre alig különbözik. Gombszínnek továbbra sem ezt használjuk. */ --text-eyebrow: var(--c-orange-darker); /* ── Akciók ─────────────────────────────────────────────────── A fő CTA-gombok mostantól a világos réz (--c-copper) színt kapják, Zsófi kérésére. A világos rézen a fehér felirat csak 3,27:1 lenne (bukna a szabványon), ezért a gombfelirat sötét (--c-black), ami 5,11:1 kontrasztot ad. A hover állapot a korábbi mintát követi: sötétre vált. */ --action-primary: var(--c-copper); --action-primary-hover: var(--c-black); --action-primary-text: var(--c-black); --action-primary-hover-text: var(--c-ivory); --action-secondary: var(--c-copper); --action-secondary-hover: var(--c-black); --action-secondary-text: var(--c-black); --action-secondary-hover-text: var(--c-ivory); --action-quiet-border: var(--c-copper); --action-quiet-text: var(--c-copper-deep); /* ── Vonalak, fókusz, állapotok ───────────────────────────── */ --line-hairline: var(--c-ivory-edge); --line-strong: var(--c-ink-30); --line-copper: var(--c-copper); --focus-ring: var(--c-copper); --state-positive: var(--c-copper); --state-attention:var(--c-yellow); --state-urgent: var(--c-orange-deep); --state-info: var(--c-copper); /* ── Tipográfia ───────────────────────────────────────────── */ --font-display: "Nova Quadrata", 'Times New Roman', serif; --font-serif: "EB Garamond", Georgia, serif; --font-sans: "Jost", "Helvetica Neue", Arial, sans-serif; --type-hero: var(--font-display); --type-heading: var(--font-display); --type-body: var(--font-serif); --type-ui: var(--font-sans); --type-label: var(--font-sans); --size-2xs: 11px; --size-xs: 13px; --size-sm: 15px; --size-base: 17px; --size-md: 20px; --size-lg: 25px; --size-xl: 31px; --size-2xl: 39px; --size-3xl: 49px; --size-4xl: 61px; --size-5xl: 76px; --leading-tight: 1.08; --leading-snug: 1.25; --leading-body: 1.62; --leading-loose:1.8; --tracking-display: -0.01em; --tracking-body: 0; --tracking-label: 0.18em; --tracking-eyebrow: 0.24em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* ── Térköz és konténerek ─────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10:128px; --gutter-inline: 24px; --container-text: 64ch; --container-page: 1140px; --container-wide: 1360px; --section-y: var(--space-9); --card-padding: var(--space-6); --control-height: 46px; --control-height-sm: 36px; /* ── Sugár, keret, árnyék ─────────────────────────────────── */ --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; --radius-pill: 999px; --radius-arch: 180px 180px 0 0; --border-hairline: 1px solid var(--line-hairline); --border-copper: 1px solid var(--line-copper); --border-ink: 1px solid var(--line-strong); --rule-accent: 2px solid var(--c-orange); --shadow-none: none; --shadow-rest: 0 1px 2px oklch(30% 0.02 70 / 0.05); --shadow-card: 0 2px 10px oklch(30% 0.02 70 / 0.06); --shadow-raised: 0 10px 28px oklch(30% 0.02 70 / 0.10); --shadow-overlay: 0 24px 64px oklch(25% 0.02 70 / 0.18); --shadow-inset-well: inset 0 1px 2px oklch(30% 0.02 70 / 0.07); /* ── Mozgás ───────────────────────────────────────────────── */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-soft: cubic-bezier(0.16, 0.68, 0.28, 1); --ease-in-out-calm: cubic-bezier(0.45, 0.05, 0.35, 1); --dur-instant: 90ms; --dur-quick: 160ms; --dur-calm: 280ms; --dur-slow: 520ms; --press-scale: 0.985; --hover-lift: -1px; } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-quick: 0ms; --dur-calm: 0ms; --dur-slow: 0ms; } }