/* * Awdur brand foundation — the shared design system for every surface * (the authenticated app AND the public author landing pages). Slice-specific * layout lives with each slice; this file owns the tokens, typography, base * elements, and the curated palette presets (D13) so nothing drifts. * * Fonts (Newsreader serif + Hanken Grotesk sans) are loaded in the layout head. * Propshaft serves this as `application`. */ :root { --paper: #F2EDE3; /* warm ground */ --paper-hi: #FBF8F2; /* raised card */ --paper-in: #EFE8DB; /* inset well */ --line: #d8d2c6; /* hairline */ --line-soft: #e4ddd0; --ink: #3b352c; /* primary text */ --ink-soft: #736B5C; /* secondary text */ --ink-faint: #a99f8d; /* placeholders */ /* App default accent is PLUM. Components reference --accent/-hi/-deep, never a hard-coded hue, so a `.palette-*` preset class (author pages) recolors everything beneath it; unclassed app chrome (dashboard, editor, auth) uses this default. */ --accent: #6B4A6B; --accent-hi: #8a638a; --accent-deep: #573957; --ok: #3A5A43; --warn: #9a6a2f; --error: #8f3a2f; --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --radius: 11px; --measure: 64ch; } /* ---- curated palette presets (D13: constrained choices, not raw hex) ---- Each preset redefines the accent family ONLY. NO accent may be lighter than .palette-terracotta: --accent is used as link-hover TEXT and is already only 4.53:1 on the default ground, so terracotta is the lightness ceiling for the whole set (design spec §3.4). Check any future accent against that floor first; the 8 x 4 accent/ground matrix passes AA because of it, not by luck. */ .palette-terracotta { --accent:#9C5B3B; --accent-hi:#c08560; --accent-deep:#8a4f33; } .palette-slate { --accent:#4A5A6B; --accent-hi:#6E7E8F; --accent-deep:#3a4857; } .palette-plum { --accent:#6B4A6B; --accent-hi:#8a638a; --accent-deep:#573957; } .palette-forest { --accent:#3A5A43; --accent-hi:#4f7a5c; --accent-deep:#2d4834; } .palette-ink { --accent:#4a4438; --accent-hi:#6a6152; --accent-deep:#2a251e; } /* appended by the theming slice — the presentation ORDER authors see is the swatch order in PagesHelper::THEME_ACCENT_LABELS, not this file's order. */ .palette-claret { --accent:#8E3A45; --accent-hi:#B0616B; --accent-deep:#752F38; } .palette-indigo { --accent:#3F4C7A; --accent-hi:#6673A0; --accent-deep:#323C63; } .palette-sea { --accent:#35605F; --accent-hi:#52807E; --accent-deep:#294D4C; } /* ---- curated GROUND presets (D13 theming slice, design spec §3.2). Same mechanism, second axis: a ground redefines the paper family ONLY. --ink* is never touched, which is exactly what keeps every accent x ground pair at AA — the safety argument decomposes because ink is invariant. NO ground may be darker than .ground-parchment: --ink-soft on --paper is already only 4.51:1 there, so a darker ground would break secondary text everywhere at once. .ground-parchment reproduces today's :root paper values byte-for-byte, which is what makes the default pair a genuine no-op. ---- */ .ground-parchment { --paper:#F2EDE3; --paper-hi:#FBF8F2; --paper-in:#EFE8DB; --line:#d8d2c6; --line-soft:#e4ddd0; } .ground-linen { --paper:#F1F0EB; --paper-hi:#FAFAF7; --paper-in:#EAE9E3; --line:#d9d7cf; --line-soft:#e5e3dc; } .ground-ivory { --paper:#FAF6EE; --paper-hi:#FFFFFF; --paper-in:#F4EFE5; --line:#e3ddd0; --line-soft:#ece7dc; } .ground-mist { --paper:#EEF1F0; --paper-hi:#F8FAF9; --paper-in:#E7EBEA; --line:#d3d8d6; --line-soft:#e0e4e3; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; margin: 0 0 0.4em; } h1 { font-size: clamp(30px, 5vw, 46px); } h2 { font-size: clamp(24px, 3.4vw, 32px); } h3 { font-size: 22px; } p { margin: 0 0 1rem; max-width: var(--measure); } a { color: var(--accent-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* eyebrow / uppercase label */ .eyebrow { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } /* ---- forms ---- */ label { display: block; font-size: 14px; color: var(--ink-soft); margin: 0 0 6px; } input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], textarea, select { width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink); background: var(--paper-hi); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; transition: border-color .18s, box-shadow .18s, background .18s; } input::placeholder, textarea::placeholder { color: var(--ink-faint); } input:focus, textarea:focus, select:focus { outline: none; background: var(--paper-hi); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } button, .button, input[type=submit] { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--paper-hi); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius); padding: 13px 22px; cursor: pointer; text-decoration: none; display: inline-block; transition: background .18s, transform .06s; } button:hover, .button:hover, input[type=submit]:hover { background: var(--accent-deep); } button:active, .button:active { transform: translateY(1px); } /* THE SPECIFICITY TRAP, and the over-correction that follows it. Read both. * * The base rule above matches a submit button as `input[type=submit]` — an * attribute selector, so (0,1,1). A bare `.button-quiet` is (0,1,0) and LOSES * every declaration to it, which meant every `f.submit` asking to be quiet * (admin Reject/Suspend, the panel's Grant and Update expiry, the book editor's * Add link / Save link) rendered accent-FILLED — the "wall of identical * recommended actions" the 2026-07-25 audit kept finding. The compound selector * (0,2,1) is what makes the class do anything at all on those elements, and it * must restate colour and background, not just the border. * * But the two rules CANNOT be merged, and the border must not be hoisted into * the bare one. ~22 `link_to` sites wear this class — the app header's * Settings/Help/Admin on every authenticated page, the public-plane preview * bar's back link — and an matches NO base button rule, so it has no * radius and no button chrome. A `border` shorthand there paints a square 1px * box around each of them. `border-color` alone is inert on an anchor (no * border-style to go with it) and is exactly enough on a