/* ========================================================================= Mesogeiako — design tokens ------------------------------------------------------------------------- The single file to edit when the client wants the look changed. Components never hard-code a colour, size or duration; they only reference tokens declared here. Palette provenance ------------------ brand #0b357e the navy the existing site already uses (footer, headings) azure #006ba6 sampled from the MEK logo mark gold #b29868 sampled from the MEK logo mark Every ramp step below was generated and contrast-checked programmatically against #ffffff and the page background. Ratios are noted so nobody has to re-measure before using one. ACCESSIBILITY RULE — gold is decorative. gold-500 is 2.77:1 on white: it fails AA for text at every size. Use it for rules, icons and borders only. For gold *text*, use gold-700 (4.53:1) or darker. For a gold UI border that must meet the 3:1 non-text minimum, use gold-600 (3.45:1). ========================================================================= */ :root { /* --- brand navy ------------------------------------------------------ */ --brand-50: #f0f3f7; --brand-100: #dde3ed; --brand-200: #bbc6db; --brand-300: #91a4c5; --brand-400: #5976a7; /* 4.59:1 on white — AA for body text */ --brand-500: #0b357e; /* 11.51:1 — primary */ --brand-600: #0b3072; --brand-700: #0b2b64; --brand-800: #0b2554; --brand-900: #0a1e44; /* --- logo azure ------------------------------------------------------ */ --azure-50: #f0f6fa; --azure-100: #dbeaf3; --azure-200: #b8d6e6; --azure-300: #8cbcd7; --azure-400: #529ac2; /* 3.11:1 — large text / UI only */ --azure-500: #006ba6; /* 5.75:1 — AA for body text */ --azure-600: #016095; --azure-700: #035382; --azure-800: #04446b; --azure-900: #063555; /* --- logo gold (decorative — see rule above) ------------------------- */ --gold-50: #faf9f6; --gold-100: #f4f1ea; --gold-200: #e9e2d5; --gold-300: #dcd1bb; --gold-400: #cbb998; --gold-500: #b29868; /* 2.77:1 — DECORATIVE ONLY, never text */ --gold-600: #9e875f; /* 3.45:1 — borders/icons, large text */ --gold-700: #867454; /* 4.53:1 — smallest gold safe for body text */ --gold-800: #6b5e47; --gold-900: #51483b; /* --- neutrals -------------------------------------------------------- */ --neutral-0: #ffffff; --neutral-50: #fafafa; /* the page ground the original site used */ --neutral-100: #f4f5f7; --neutral-200: #e6e8ec; --neutral-300: #d2d6dd; --neutral-400: #9aa1ad; /* 2.9:1 — non-text only */ --neutral-500: #6b7280; /* 4.83:1 — AA body */ --neutral-600: #565d69; --neutral-700: #3f454f; --neutral-800: #272b33; /* 13.6:1 — default body text */ --neutral-900: #14171c; /* --- status ---------------------------------------------------------- */ --success-500: #0f7a4d; --success-50: #eaf6f0; --warning-500: #92610a; --warning-50: #fdf5e6; --danger-500: #b3261e; --danger-50: #fdeceb; /* --- semantic roles -------------------------------------------------- Components reference these, not the ramps above, so a rebrand means editing this block alone. */ --color-bg: var(--neutral-50); --color-bg-raised: var(--neutral-0); --color-bg-sunken: var(--neutral-100); --color-bg-inverse: var(--brand-800); --color-bg-accent: var(--brand-500); --color-text: var(--neutral-800); --color-text-muted: var(--neutral-500); --color-text-inverse: var(--neutral-0); --color-text-on-accent:var(--neutral-0); --color-heading: var(--brand-700); --color-link: var(--azure-600); --color-link-hover: var(--brand-600); --color-border: var(--neutral-200); --color-border-strong: var(--neutral-300); --color-rule-accent: var(--gold-500); --color-focus: var(--azure-600); --color-selection-bg: var(--brand-100); /* --- typography ------------------------------------------------------ Inter covers Greek and Latin, so one family serves both languages. */ --font-sans: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* Fluid scale: min at 360px viewport, max at 1440px. */ --text-xs: clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem); --text-sm: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem); --text-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem); --text-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem); --text-xl: clamp(1.25rem, 1.17rem + 0.36vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.36rem + 0.63vw, 1.875rem); --text-3xl: clamp(1.875rem, 1.65rem + 1.00vw, 2.5rem); --text-4xl: clamp(2.25rem, 1.87rem + 1.68vw, 3.25rem); --text-5xl: clamp(2.75rem, 2.18rem + 2.54vw, 4.25rem); --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed: 1.75; /* justified body copy needs the extra air */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --- spacing (4px base) ---------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* Vertical rhythm between page sections, fluid. */ --section-y: clamp(3.5rem, 2.5rem + 4vw, 7rem); /* --- layout ----------------------------------------------------------- */ --container-max: 1200px; --container-wide: 1400px; --container-text: 68ch; /* readable measure for justified prose */ --gutter: clamp(1rem, 0.5rem + 2.2vw, 2.5rem); /* --- radii ------------------------------------------------------------ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-full: 9999px; /* --- elevation -------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(10, 30, 68, 0.06); --shadow-sm: 0 2px 6px rgba(10, 30, 68, 0.08); --shadow-md: 0 8px 20px rgba(10, 30, 68, 0.10); --shadow-lg: 0 18px 44px rgba(10, 30, 68, 0.14); --shadow-focus: 0 0 0 3px rgba(0, 107, 166, 0.35); /* --- motion ------------------------------------------------------------ Durations are tokens so the whole site can be slowed, sped up, or switched off from one place. */ --duration-fast: 140ms; --duration-base: 240ms; --duration-slow: 420ms; --duration-slower: 700ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* --- z-index ---------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* --- component sizing -------------------------------------------------- */ --topbar-height: 40px; --header-height: 78px; --header-height-condensed: 62px; --tap-target-min: 44px; /* WCAG 2.2 target size */ } /* Motion tokens collapse when the visitor asks for reduced motion. Because every animation reads these, one override disables them site-wide. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; --duration-slower: 1ms; } }