/* ============================================================================= LAYER 1 — TOKENS Source of truth: projects/sportskiribolov/design.md v1 (§1 colour, §2 type, §3 spacing). Values here are VERBATIM from that file. If a value needs to change, change design.md first and copy it here — never the reverse. DECLARATIONS ONLY. No selectors beyond :root, no rules, no components. Every later layer consumes var(--x) and never a raw hex. ============================================================================= */ :root { /* --- colour: core -------------------------------------------------------- */ --sea: #0B4F7A; /* PRIMARY — headings, text links, header/footer, table headers. 8.2:1 on white */ --sea-dark: #083A5C; /* hover/active on primary */ --azure: #00ADFF; /* SECONDARY accent — graphics, icons, Ukratko border, focus ring. ~2.4:1 on white: NEVER small text or links on white. Fine on --sea. */ --azure-tint: #E6F6FF; /* Ukratko panel bg, info-table tint */ --coral: #E85D26; /* CTA / affiliate ONLY. White text on coral = large/bold only (~3.2:1) */ --coral-dark: #C74A18; /* CTA hover, and the only coral that carries small white text (4.6:1) */ --amber: #F9A825; /* ratings, top-pick badges. Dark text on amber, never white */ /* --- colour: neutrals ---------------------------------------------------- */ --ink: #22313B; /* body text, 13:1 */ --muted: #5C6B76; /* secondary text, captions, latin names, 4.9:1 */ --border: #D9E0E5; --sand: #F7F4EF; /* warm alt-section background */ --zebra: #F7F9FA; /* table stripe */ --surface: #FFFFFF; /* cards, page */ /* --- colour: on-fill and chrome ------------------------------------------ Added 2026-08-06. These existed as raw #fff / #B8D9EE / rgba() literals scattered through layers 3 and 4, which quietly broke the one rule this layer exists to enforce. Naming them puts every colour back in one file. */ --on-fill: #FFFFFF; /* text on --sea / --coral / --closed / --open fills */ --footer-link: #B8D9EE; /* azure FAMILY at ~5:1 on --sea. --azure itself fails here */ --footer-rule: rgba(255,255,255,.18); --hero-sub: #DCEEF8; /* hero subheading on the photo overlay */ --hero-veil-top: rgba(11,79,122,.60); /* design.md §5: --sea gradient overlay 60%→20% */ --hero-veil-bottom: rgba(11,79,122,.20); /* --- colour: on-sea text + hero veils (added 2026-08-09, Obala build) ------ Every light-on-dark tint the hero and photo bands use, so layer 4 never writes a raw colour. --on-sea-soft unifies three near-identical tints the mockup accumulated (#E4F1F9 / #D6EAF6 / #DCEBF5). */ --on-sea-soft: #DCEBF5; /* body text on --sea / photo veils */ --on-sea-kick: #BFE6FF; /* kicker / eyebrow on hero */ --veil-hero: linear-gradient(100deg, rgba(8,58,92,.82) 0%, rgba(8,58,92,.55) 42%, rgba(8,58,92,.18) 78%, rgba(8,58,92,.10) 100%); --veil-band: linear-gradient(90deg, rgba(8,58,92,.86) 0%, rgba(8,58,92,.55) 55%, rgba(8,58,92,.30) 100%); --shadow-hero-title: 0 2px 18px rgba(4,24,38,.45); --shadow-hero-sub: 0 1px 10px rgba(4,24,38,.5); --elev-pillar: 0 4px 16px rgba(8,58,92,.10); /* --- colour: semantic — REGULATORY STATUS ONLY ---------------------------- */ /* Never decorative. Diluting these costs the meaning on a page that carries 41% of all site traffic. Template B's "Česte greške" list deliberately uses --ink instead. */ --open: #2E7D4F; /* DOZVOLJEN LOV — white text passes */ --closed: #C62828; /* LOVOSTAJ — white text passes */ /* --- diagram tokens (design.md §5) ---------------------------------------- */ --dg-bg: var(--surface); /* MUST equal the diagram panel's own background — it is the casing colour that punches the over/under gap */ --dg-line: var(--sea); --dg-active: var(--coral); --dg-hook: var(--muted); /* --- type ---------------------------------------------------------------- */ --f-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --f-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-h1: 36px; --fs-h1-m: 30px; --fs-h2: 28px; --fs-h2-m: 24px; --fs-h3: 22px; --fs-h3-m: 20px; --fs-h4: 18px; --fs-body: 17px; --fs-small: 14px; --fs-btn: 16px; --lh-body: 1.65; --lh-head: 1.22; /* --- layout -------------------------------------------------------------- */ --measure: 720px; /* article measure */ --shell: 1320px; /* page shell — widened from 1200 by owner decision 2026-08-08 (species photo tiles too small at 1200; design.md §2 updated) */ /* --- spacing: 4px base --------------------------------------------------- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --pad-section: 48px; --pad-section-m: 32px; /* --- radius -------------------------------------------------------------- */ --r-card: 8px; --r-input: 6px; --r-pill: 999px; /* --- elevation ----------------------------------------------------------- */ /* Borders over shadows. ONE soft tier, for the sticky header and dropdowns only. */ --shadow-1: 0 1px 3px rgba(11, 79, 122, .10), 0 4px 12px rgba(11, 79, 122, .06); /* --- breakpoint ---------------------------------------------------------- */ /* Not usable in @media (custom properties do not work there) — declared so the value has one written home. The literal 768px in later layers must match this. */ --bp-mobile: 768px; } /* ----------------------------------------------------------------------------- DARK MODE — DELIBERATELY NOT SHIPPED. design.md defines no dark tokens. A proposed set exists in the preview artifact (sea lifted to #7FC4EE, coral to #FF7A4A, open/closed re-cut for contrast) but it is a proposal, not the locked system, and the regulatory green/red pair needs a deliberate decision rather than an inversion. Until that is settled this theme ships light only. `color-scheme: light` is set explicitly so the browser does not auto-darken form controls and produce a half-themed page — which is worse than no dark mode at all. ----------------------------------------------------------------------------- */ :root { color-scheme: light; }