/* ============================================================ kol-tokens.css — design token layer + normalization ------------------------------------------------------------ S26: the palette, type and shape now come from Carolain's redesign (docs/new-info-20260807-new-styles-carolain/). Her source values, verbatim: --ink:#151714 --muted:#727670 --subtle:#999c97 --amber:#f0a000 --amber2:#ffb719 --cream:#fff9ed --line:#e8e5df --bg:#fbfbfa --green:#24ad59 --shadow:0 8px 30px rgba(41,35,24,.055) Poppins, negative letter-spacing on headings Every semantic name below is UNCHANGED from before, so pages that have not been ported yet keep working and simply take the new colours. That is the whole point of doing this file first: one edit re-skins 44 pages. LOAD ORDER (must be FIRST, before kol-app.css): kol-tokens.css -> kol-shell.css -> kol-app.css -> platform.css ONE ACCENT ONLY. Amber marks what is actionable or featured. Two accents competing is the single easiest way to undo her work. Red is reserved for destruction and nothing else. ============================================================ */ :root { /* --- Brand ------------------------------------------------ THE BRAND RAMP. Every accent in every stylesheet points at a step of this ramp; nothing hard-codes an amber any more. js/theme.js recomputes all 21 steps from the community's color_primary before the first paint, so changing the colour in Ajustes re-skins the whole app, not just the buttons. The step number is the OKLab lightness x100, so --brand-51 is the same darkness whatever hue the community picked, and the contrast the design was drawn with survives the swap. The values below are the default amber — they are what a community that never touches the setting sees, and what the app shows before theme.js runs. Do NOT type a raw accent colour into a page stylesheet. Pick the ramp step nearest the lightness you want; for a muted version, mix it toward the grey of the same lightness: color-mix(in oklab, var(--brand-91), #dcd8d1 30%) */ --brand-23: #271A08; --brand-32: #472D02; --brand-43: #6E4600; --brand-47: #7C5000; --brand-51: #8B5A00; --brand-54: #966200; --brand-58: #A66D00; --brand-62: #B57700; --brand-67: #C98500; --brand-72: #DD9300; --brand-74: #E59900; --brand-76: #EE9E00; --brand-78: #F6A400; --brand-81: #FEAF15; --brand-83: #FFB927; --brand-87: #FFCB6A; --brand-91: #FFDC9C; --brand-93: #FFE4B2; --brand-96: #FFF0D4; --brand-97: #FFF4DE; --brand-98: #FFF8E9; /* Semantic aliases — prefer these going forward. theme.js overwrites each one; the values here are the amber default. */ --brand: #F0A000; /* the community's colour */ --brand-rgb: 240, 160, 0; /* for rgba(var(--brand-rgb), a) */ --brand-2: #FFB725; /* gradient partner */ --brand-hover: #D88F00; /* pressed */ --brand-soft: #FFF8E9; /* tinted fill */ --brand-softer: #FFFBF4; /* lightest wash */ --brand-on: #271A08; /* text ON the brand fill */ --brand-on-flat: #271A08; /* legacy alias of --brand-on */ --brand-ink: #A26A00; /* brand text on white, AA 4.5 */ --brand-muted: #C58200; /* quieter brand text, AA 3.1 */ /* Legacy names kept and re-pointed. Nothing imports the old blue any more, but the names survive in page CSS. */ --miel: var(--brand); --miel-claro: var(--brand-soft); --panal: #FBFBFA; --tinta: #151714; --tinta-70: #727670; --tinta-45: #999C97; --cera: var(--brand-hover); --conexion: #24AD59; --error: #C0392B; --blanco: #FFFFFF; /* The primary call to action is a gradient, not a flat fill. Declared once so no page reinvents the angle. */ /* Mismo recorrido ancho que calcula theme.js (ver su --brand-grad): de un paso por debajo del color a uno bastante por encima, para que el relieve se vea también en una comunidad de color oscuro. */ --brand-grad: linear-gradient(135deg, #C98500 0%, #FFC94D 100%); --brand-glow: 0 7px 18px rgba(var(--brand-rgb), .20); /* --- Ink (text) ------------------------------------------ */ --ink: var(--tinta); /* #151714 headings, body */ --ink-2: var(--tinta-70); /* #727670 secondary */ --ink-3: var(--tinta-45); /* #999C97 meta, captions */ --ink-inverse: #FFFFFF; /* --- Surfaces -------------------------------------------- */ --surface: #FFFFFF; /* cards, dialogs */ --surface-subtle: #FDFCF9; /* zebra rows, wells */ --surface-muted: #F5F4F2; /* hover fills, comments */ --canvas: var(--panal); /* #FBFBFA app background */ --border-subtle: #EFEDE8; /* hairline dividers */ --border: #E8E5DF; /* default control border */ --border-strong: #D8D1C3; /* emphasized / hover */ /* --- Status ---------------------------------------------- */ --success: var(--conexion); /* #24AD59 */ --success-fg: #258146; --success-bg: #EEF8F1; --danger: var(--error); /* #C0392B destructive */ --danger-bg: #FDF1EF; --danger-border: #F3D9D4; --warning: #B57A00; --warning-bg: #FFF6E8; --info: #2877DB; --info-bg: #EAF3FF; /* Her category colours, used by post labels and activity rows. Never as an accent — only to distinguish a kind. */ --tone-search: #6C43AE; --tone-search-bg: #F1EDFF; --tone-offer: #188443; --tone-offer-bg: #E9F8EE; --tone-celebrate: #C15E32; --tone-celebrate-bg: #FFF1EC; --tone-announce: #1763B7; --tone-announce-bg: #EAF3FF; /* --- Type ------------------------------------------------ Poppins throughout. Headings carry negative tracking; that is most of what makes her screens look composed. FLOOR IS 11px — enforced below and in kol-app.css. */ --font: "Poppins", -apple-system, BlinkMacSystemFont, Arial, sans-serif; --fs-2xs: 11px; /* ABSOLUTE FLOOR — never go below */ --fs-xs: 12px; /* captions, meta, timestamps */ --fs-sm: 13px; /* dense UI, chips, table cells */ --fs-md: 14px; /* secondary body */ --fs-base: 15px; /* body default */ --fs-lg: 16px; /* lead paragraph, card title */ --fs-xl: 19px; /* section heading */ --fs-2xl: 24px; /* page subheading, stat numerals */ --fs-3xl: 28px; /* page title (hers run 28, not 34) */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.5; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Headings only. Body text at negative tracking reads badly in Spanish and Portuguese, which run longer than English. */ --track-title: -.035em; --track-head: -.02em; /* --- Spacing (4px base) ---------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; /* --- Radius ---------------------------------------------- Her shapes are rounder than ours were. Cards 16, controls 10-11, chips 7, pills fully round. */ --radius-sm: 7px; /* chips, tags, small labels */ --radius: 10px; /* inputs, buttons, tiles */ --radius-md: 11px; /* larger controls, tool bars */ --radius-lg: 16px; /* CARDS — her signature */ --radius-xl: 20px; /* sheets, modals */ --radius-pill: 999px; --radius-circle: 50%; /* --- Elevation ------------------------------------------- Hers is one soft, warm, low shadow. Resist adding more. */ --sh-sm: 0 2px 8px rgba(0, 0, 0, .025); /* controls */ --sh-md: 0 8px 30px rgba(41, 35, 24, .055); /* CARDS */ --sh-lg: 0 20px 55px rgba(25, 22, 16, .16); /* menus */ --sh-xl: 0 30px 80px rgba(25, 22, 16, .22); /* modals */ --sh-up: 0 -2px 10px rgba(0, 0, 0, .10); /* docked */ --ring: 0 0 0 3px rgba(var(--brand-rgb), .13); /* focus */ /* --- Motion ---------------------------------------------- */ --dur-fast: .16s; --dur-base: .2s; --ease: cubic-bezier(.4, 0, .2, 1); /* --- Layout ---------------------------------------------- */ --header-h: 84px; /* her shell is taller than ours */ --appbar-h: 84px; /* legacy alias */ --navbar-h: 0px; /* one bar now, not two */ --shell-max: 1510px; /* her dashboard max */ --rail-w: 360px; /* her right column */ /* --- Z-index --------------------------------------------- */ --z-base: 1; --z-dropdown: 80; --z-appbar: 180; --z-dock: 200; --z-modal: 300; --z-toast: 400; /* --- Carolain's own names -------------------------------- Her stylesheets are copied verbatim when a screen is ported, and they say var(--line), var(--amber) and so on. Defining her names here, pointed at the values above, is what lets a ported file arrive with no :root of its own. Each of her files drifted a few hex digits apart; these are the canonical values, so every ported screen agrees. --radius is deliberately NOT aliased. Hers means a card (16px), ours means a control (10px). A ported stylesheet sets it for itself, next to its own header comment. */ --amber: var(--brand); /* the community's colour */ --amber2: var(--brand-2); --amber-2: var(--brand-2); /* the spelling in two files */ --amber-ink: var(--brand-ink); --cream: var(--brand-soft); /* #FFF9ED */ --line: var(--border); --line-soft: var(--border-subtle); --bg: var(--canvas); --paper: var(--surface); --dark: var(--tinta); --green: var(--conexion); --subtle: var(--ink-3); --shadow: var(--sh-md); --shadow-sm: var(--sh-sm); --shadow-lg: var(--sh-lg); } /* ============================================================ NORMALIZATION ============================================================ */ body { /* El margen de 8px que el navegador pone por defecto. Cuarenta hojas de pagina lo reinician por su cuenta y ocho no —surveys, feed, crm, group, platform, admin-plans, store-orders, chat-dock—, asi que esas pantallas salian corridas 8px y con barra horizontal en el telefono: el documento media 402 en una ventana de 390. Va aqui, que es donde ya vive la regla de body y la carga TODA pagina; dejarlo en cada hoja es ocho sitios donde volver a olvidarlo. */ margin: 0; font-family: var(--font); background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; } h1, h2, h3 { letter-spacing: var(--track-head); } h1 { letter-spacing: var(--track-title); } /* 1. Form controls do NOT inherit font-family. Without this, every select, option, button and input falls back to Arial while the rest of the page renders Poppins. */ button, input, select, optgroup, option, textarea { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; } button, a, select { cursor: pointer; } /* 2. Native select keeps its OS chrome. Give it the same shape as text inputs. Ported screens replace it entirely with the dropdown component; this is for the ones that have not been ported yet. */ select { appearance: none; -webkit-appearance: none; background-color: var(--surface); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999C97' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-3) center; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-2) var(--sp-7) var(--sp-2) var(--sp-3); font-size: var(--fs-md); } select:hover { border-color: var(--border-strong); } /* 3. Typography floor. */ small, caption, .hint, .text-small, .meta, label { font-size: var(--fs-xs); } /* 4. Visible, consistent focus for keyboard users. Amber ring rather than an outline, to match her controls. */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); } :focus:not(:focus-visible) { outline: none; } /* 5. Media never overflows or distorts. */ img, video { max-width: 100%; height: auto; } /* 6. Long unbroken strings must not blow out card widths. */ p, li, td, .post-body, .card { overflow-wrap: anywhere; } /* ============================================================ i18n — English primary, with es + pt Spanish and Portuguese run 15-25% longer than English for the same string. These rules make the layout tolerant of it. ============================================================ */ /* 7. Never size a control by its English label. */ button, .btn, .type-btn, .chip, .tag, .pill { /* max-content a secas hace que un rótulo largo (una opción de