/* Cuenca Web design tokens — "Cúpulas y tejas". --------------------------------------------------------------------------- The palette is the site's own emblem: the three glazed domes of the Catedral de la Inmaculada Concepción over tile roofs, on whitewashed walls, in the stone of the historic centre. Every colour below is one of those five materials, or a tint of one (<=50% white) or a shade of one (<=25% black). Cal #fbfaf8 whitewash — the ground Azul cúpula #1f5a9e the glazed dome tiles — the main colour, links Azul noche #0d2f52 text and dark fields Teja #a4502c roof tile — buttons and actions, wrong answers Piedra #cdbfa5 stone — quiet bands and hairlines The derivation rule is the one the historic-centre colour regulation uses (GAD Municipal de Cuenca, "Reglamento para el uso del color y materiales en las edificaciones del Centro Histórico", https://www.cuenca.gob.ec/node/8822): no pure primaries; a base, tints to 50% white, shades to 25% black. Bus line colours, route strokes and map fills are data and are never restyled. If you need a colour that is not here, derive it from a base with that rule and add it here with its measured contrast ratio. Do not invent one. Ratios are measured against --lime (cal) unless noted. No dark theme. --------------------------------------------------------------------------- */ :root{ /* ---- Bases -------------------------------------------------------- */ --base-cal: #fbfaf8; /* whitewash */ --base-cupula: #1f5a9e; /* glazed dome tile */ --base-noche: #0d2f52; /* dome blue, 25%-black end: text */ --base-teja: #a4502c; /* roof tile */ --base-piedra: #cdbfa5; /* stone */ --base-verde: #5c7a52; /* kept for map vegetation and "correct" */ /* Legacy base names still read by a few stylesheets. */ --base-celeste: var(--base-cupula); --base-ochre: var(--base-teja); /* ---- Ground ------------------------------------------------------- */ --lime: #fbfaf8; /* cal — page ground (legacy token name) */ --lime-raised: #ffffff; /* cards, inputs, map frames */ --lime-sunken: #e6dfd2; /* piedra + 50% white — wells, bands, empty states */ /* ---- Ink ---------------------------------------------------------- */ --ink: #0d2f52; /* 13.03:1 body and headings (10.26 on sunken) */ --ink-2: #3f5872; /* 7.06:1 secondary text, ledes (5.56 on sunken) */ --ink-3: #4d6680; /* 5.71:1 captions — 14px and above (4.49 on sunken) */ --ink-inverse: #fbfaf8; /* 13.03:1 on --stone-panel */ --stone-panel: #0d2f52; /* azul noche — dark feature surface */ /* ---- Azul cúpula: the main colour (legacy name --celeste) --------- */ --celeste: #1f5a9e; /* 6.68:1 links, eyebrows, focus ring on light */ --celeste-mid: #5783b6; /* +25% white — map marks, chart fills */ --celeste-pale: #8facce; /* +50% white — 5.80:1 on --stone-panel, focus on dark */ /* ---- Teja: actions (legacy name --ochre for labels) --------------- */ --action: #a4502c; /* 5.35:1 primary buttons; --ink-inverse on it 5.35:1 */ --action-hover: #834023; /* -20% black — 7.39:1 */ --ochre: #a4502c; /* 5.35:1 labels and small caps, 14px+ (4.21 on sunken: avoid) */ --ochre-mid: #b67356; /* teja +20% white — chart fills */ --ochre-pale: #cdbfa5; /* piedra — band, field tint, selected row. Navy on it 7.50:1 */ /* ---- Verde: quiet register ---------------------------------------- */ --verde: #516b48; /* 5.68:1 "correct", map vegetation */ --verde-pale: #aebca8; /* ---- Teja as signal ----------------------------------------------- */ --teja: #a4502c; /* 5.35:1 wrong answers, errors, conflicts */ /* ---- Rule --------------------------------------------------------- */ --rule: #cdbfa5; /* 1.74:1 piedra hairline — 1px */ --rule-strong: #0d2f52; /* 13.03:1 structural — 2px */ /* ---- Zócalo ------------------------------------------------------- */ /* The painted baseboard of a historic facade, now a band of stone. Used on the page foot only. */ --zocalo-band: #cdbfa5; --zocalo-h: 4px; /* ---- Type --------------------------------------------------------- */ /* Chivo, Omnibus-Type (Buenos Aires). One sturdy grotesque from 800 headlines to 400 text, with every Spanish diacritic. Vendored under assets/fonts/chivo, never CDN-loaded. --display "Chivo Display": the static ExtraBold cut. Headings at --t-display and --t-title always render at 800. --sans Chivo variable 100–900: everything else. --serif legacy name; now the same reading face as --sans. */ --display: "Chivo Display", "Chivo", system-ui, -apple-system, "Segoe UI", sans-serif; --sans: "Chivo", system-ui, -apple-system, "Segoe UI", sans-serif; --serif: var(--sans); --t-display: clamp(40px, 5.6vw, 80px); --t-title: clamp(28px, 3.2vw, 40px); --t-head: 24px; --t-sub: 19px; --t-body: 16px; /* Chivo has a large x-height; 16px reads like Alegreya 17 */ --t-dense: 14px; /* floor for all UI text */ --t-label: 12px; /* uppercase, tracked, >=600 weight only */ --t-micro: 11px; /* map attribution and legal credits ONLY */ --lh-display: 1; --lh-title: 1.08; --lh-head: 1.2; --lh-body: 1.6; --lh-dense: 1.45; --track-display: -.025em; --track-label: .08em; /* ---- Space — 4px grid, no values between ------------------------ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ---- Layout ----------------------------------------------------- */ --page-max: 1280px; --gutter: clamp(20px, 4vw, 64px); --col-gap: 24px; --measure: 64ch; /* ~72 characters at --t-body */ --header-h: 72px; /* ---- Shape ------------------------------------------------------ */ --radius: 0; /* structural surfaces are square */ --radius-ctl: 0; /* square, like the brand; kept as a token for scoped pages */ --hit: 44px; /* ---- Motion ----------------------------------------------------- */ --ease: cubic-bezier(.2,.6,.3,1); --dur: .16s; /* ---- Elevation --------------------------------------------------- */ /* Exactly one shadow. Only and popovers may use it. */ --shadow-overlay: 0 16px 48px rgba(13,47,82,.28); } /* Structural transparency and dialog scrim are not facade colours. */ :root { --clear:transparent; --scrim:rgba(13,47,82,.55); } /* Scoped to the separate landscape page requested from the user's mockup. Existing pages retain their square surfaces and original token values. Rail width is derived from the 12-column grid, not tuned to a label. */ .cajas-landscape-page { --radius:16px; --radius-ctl:12px; --landscape-col:calc((min(100vw,var(--page-max)) - var(--gutter) * 2 - var(--col-gap) * 11) / 12); --landscape-rail:clamp(calc(var(--s-9) * 3),calc(var(--landscape-col) * 4 + var(--col-gap) * 3),calc(var(--s-9) * 4.5)); --landscape-ground:var(--stone-panel); --landscape-rule:rgba(205,191,165,.55); --landscape-dark:rgba(13,47,82,.84); --landscape-selected:rgba(81,107,72,.09); --landscape-selected-rule:rgba(81,107,72,.25); } /* Compact map controls use the canonical 3px radius, including the landscape's Silverheels-style callouts. Their colors are existing site tokens. */ .cajas-landscape-page .landscape-callout { --radius-ctl:3px; } /* The site header stays square on the landscape page too: it is the shell, not part of that mockup. */ .cajas-landscape-page .cu-header,.cajas-landscape-page .cu-menu { --radius:0; --radius-ctl:0; } @font-face { font-family:"Chivo"; src:url("/assets/fonts/chivo/Chivo-latin-wght.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Chivo"; src:url("/assets/fonts/chivo/Chivo-latin-ext-wght.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Chivo"; src:url("/assets/fonts/chivo/Chivo-latin-wght-italic.woff2") format("woff2"); font-weight:100 900; font-style:italic; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* The static ExtraBold cut, declared across the whole weight range so a display heading renders at 800 whatever weight its rule asks for. */ @font-face { font-family:"Chivo Display"; src:url("/assets/fonts/chivo/Chivo-latin-800.woff2") format("woff2"); font-weight:1 1000; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Chivo Display"; src:url("/assets/fonts/chivo/Chivo-latin-ext-800.woff2") format("woff2"); font-weight:1 1000; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Transitional names used by existing app templates, all drawn from the system. */ :root { --cu-paper:var(--lime); --cu-ink:var(--ink); --cu-clay:var(--celeste); --cu-line:var(--rule); --cu-muted:var(--ink-2); --cu-header:var(--header-h); } /* Existing component variable aliases; no separate palette is defined by a tool. */ :root { --green:var(--celeste); --muted:var(--ink-2); --line:var(--rule); --paper:var(--lime-raised); --soft:var(--lime-sunken); --rust:var(--celeste); --orange:var(--celeste); --forest:var(--stone-panel); --forest-light:var(--verde); --moss:var(--verde-pale); --paper-deep:var(--lime-sunken); --white:var(--lime-raised); --clay:var(--teja); --clay-light:var(--ochre-pale); --sun:var(--ochre-mid); --bg:var(--lime); --surface:var(--lime-sunken); --card:var(--lime-raised); --border:var(--rule); --sage:var(--verde); --sage-deep:var(--celeste); --sage-pale:var(--verde-pale); --ochre-deep:var(--ochre); --rust-pale:var(--ochre-pale); --green-go:var(--verde); --red-no:var(--teja); --faint:var(--ink-3); --body:var(--sans); --mono:var(--sans); --accent:var(--celeste); --map-ink:var(--ink); --map-muted:var(--ink-2); --map-paper:var(--lime-raised); --map-line:var(--rule); --map-accent:var(--celeste); --map-green:var(--celeste); } /* Protected municipal 17% band treatment. Do not retune the band or its ink. */ :root { --bus-band-paper:#fffdf7; --bus-band-ink:#183c33; } /* Protected cartographic colours moved verbatim from screen CSS. These are map data/symbology, exempt from facade colour derivation under AGENTS.md. */ :root { --carto-1:#617a68; --carto-2:white; --carto-3:#fbfcf4e6; --carto-4:#dce5d4; --carto-5:#364b40; --carto-6:#fff; --carto-7:#263f39; --carto-8:#fafbf8; --carto-9:#d9e9c5; --carto-10:#6e8874; --carto-11:#b9c3b5; --carto-12:#ccd9c3; --carto-13:#f9fbf2; --carto-14:#bdcdb9; --carto-15:#d6dfc8; --carto-16:#99b998; --carto-17:#153e36; --carto-18:#356951; --carto-19:#fff9e9; --carto-20:#bd775d; --carto-21:#884526; --carto-22:#a2492d; --carto-23:#edf0e4; --carto-24:#bbd2a9; --carto-25:#d3d0bb; --carto-26:#c5c6b1; --carto-27:#a9ced6; --carto-28:#6eacbc; --carto-29:#819884; --carto-30:#244f3e; --carto-31:#f3f4e9; --carto-32:#274a38; --carto-33:#f1f3e7; --carto-34:#3e776b; --carto-35:#3d7889; --carto-36:#719665; --carto-37:#f7f8ed; --carto-38:#8caf8b; --carto-39:#426b4b; --carto-40:#173d2a; --carto-41:#c6dcc0; --carto-42:#b5cca4; --carto-43:#f9f7ef; --carto-44:#56645c; --carto-45:#fff1c7; --carto-46:#f7f3e8; --carto-47:#a95032; } :root { --page-edge:max(var(--gutter),calc((100vw - var(--page-max))/2 + var(--gutter))); --page-bleed:calc(50% - 50vw); --rail:calc((min(100vw,var(--page-max)) - var(--gutter) * 2 - var(--col-gap) * 3) / 4); } /* Original map canvas grounds. Protected cartographic surfaces, not UI fields. */ :root { --map-province-ground:#ebe4d2; --map-parish-ground:#eef0e6; }