/* ================================================================ JOKOWI CHATBOT — Design System (light / "Biru Jokowi") ================================================================ THE single source of truth for design tokens. WHY BLUE. Jokowi has no documented "favourite colour". The one first-hand statement is about blue: asked in Balikpapan on 5 December 2016 about the discounted blue sandals he had just bought, he said "warnanya banyak dan saya senang yang (warna) biru" (telegraf.co.id). His real visual signature is the plain white shirt. So the palette is blue on white: a deep-to-sky blue ramp for the brand, a cool "kemeja putih" white for the ground. The blues are deep and institutional on purpose, not a party or campaign shade. GROUND: a very light sky blue canvas, frosted near-white rails, and pure white cards — the white shirt — floating on it, so surfaces separate by tone and soft shadow rather than by borders. Rules: - Tokens are defined here and NOWHERE else. - Contrast is not a matter of taste: every foreground token must clear WCAG AA (4.5:1) against ALL FOUR background tokens below. On a light ground the binding constraint is the DARKEST surface, --bg-hover. ContrastTest enforces the full matrix. - Page-specific component CSS stays in its own template. EMPHASIS SCALE, NOT LIGHTNESS. The ramps run base -> -strong -> -deep, meaning increasing emphasis; on white that means DARKER. The `body` rule is deliberately NOT here. chatbot.html needs an iOS-specific height fallback chain (100vh -> -webkit-fill-available -> 100dvh) whose declaration ORDER is load-bearing. ================================================================ */ :root { /* ── Grounds — layered light blue. The chat canvas is a very light sky blue; the rails (sidebar, header, input bar, footer) are a shade deeper, so they frame the canvas and nothing on the page is plain white except what should stand out: cards, message bubbles and the input field — the "kemeja putih" white, floating on blue. --bg-hover is the darkest and therefore the one every foreground token has to survive. ── */ --bg-primary: #edf4fc; /* canvas */ --bg-secondary: #e3eefb; /* rails: sidebar, header, input bar, footer */ --bg-tertiary: #ffffff; /* input field, white on the blue bar */ --bg-elevated: #f7fbff; --bg-hover: #dde9f7; --surface: #ffffff; /* cards, bubbles */ --surface-light: #f3f8fe; /* card hover */ --surface-border: rgba(17, 58, 110, 0.10); --surface-border-hover: rgba(17, 58, 110, 0.22); /* ── Biru Jokowi — the brand. Primary actions, the persona's name, avatar rings, the user's own bubble. ── */ --biru: #1d5aa8; /* 5.54:1 worst case, white label 6.82:1 */ --biru-strong: #174a8c; /* 7.13:1 */ --biru-deep: #113a6e; /* 9.21:1 */ --biru-dim: rgba(29, 90, 168, 0.10); --biru-glow: rgba(29, 90, 168, 0.20); /* ── Langit — sky blue. FILL ONLY (gradient ends, highlights, progress bars), never text: it is under 4.5:1 on --bg-hover. A white label on it is 5.14:1, which ContrastTest asserts. ── */ --langit: #1f6fbf; --langit-soft: #cfe1f5; /* ── Denim — the quiet secondary, so --biru stays reserved for primary emphasis: input focus, status chips. ── */ --denim: #3d6390; /* 5.04:1 */ --denim-strong: #314f74; /* 6.83:1 */ --denim-dim: rgba(61, 99, 144, 0.12); /* ── Slate — the system voice ONLY: the AI-simulation notice and error/system messages. Deliberately not blue, so a reader can always tell the application speaking from the persona. ── */ --slate: #4a5a6e; /* 5.73:1 */ --slate-strong: #3a4757; /* 7.69:1 */ --slate-dim: rgba(74, 90, 110, 0.10); /* ── Merah — flag red, LITERAL uses only: the flag pin on the dancer's lapel and his red tie. Not a brand colour here. ── */ --merah: #b31f1f; /* 5.45:1 */ /* ── Sepeda — mascot two-tone. --sepeda-light is a fill INSIDE the mascot (spokes, hubs), adjacent to the frame, never text on the page: it is held to frame contrast, not to AA against white. ── */ --sepeda-frame: #1d5aa8; --sepeda-light: #cfe1f5; /* ── Text ── */ --text-primary: #16202c; /* 13.37:1 worst case */ --text-secondary: #44505f; /* 6.67:1 */ --text-muted: #556173; /* 5.11:1 — the US-001 value was 3.00:1 */ --text-strong: #0b121b; /* 15.29:1 — maximum emphasis */ --accent-green: #1a6e2d; /* online — 5.15:1 */ --accent-red: #b3261e; /* offline — 5.31:1 */ /* ── Elevation. On a light ground depth comes from soft neutral shadow, not from glow. ── */ --shadow-sm: 0 1px 2px rgba(17, 38, 70, 0.06); --shadow-md: 0 4px 16px rgba(17, 38, 70, 0.10); --shadow-lg: 0 8px 32px rgba(17, 38, 70, 0.14); --shadow-glow-biru: 0 4px 16px rgba(29, 90, 168, 0.24); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px; --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* ── Typeface roles ── Plus Jakarta Sans — by Tokotype, an Indonesian type foundry — is the whole voice of the product: the name, headings and interface. Plain, modern and unfussy, like the persona's own style; display sizes use its heavy weights (700–800), the interface 400–600. Lora italic is reserved for QUOTATIONS, so documented words read as a distinct voice from the answers around them. ── */ --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-quote: 'Lora', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ── Type scale ── US-001 accumulated 23 distinct font sizes across the two pages, including 0.68 / 0.70 / 0.72rem and 0.80 / 0.82 / 0.85 / 0.875 / 0.88rem — differences no reader can perceive and no designer chose. They collapse to these steps. Use a token; if none fits, the design needs a decision, not a twenty-fourth value. ── */ --text-2xs: 0.625rem; /* 10px — credits, micro labels */ --text-xs: 0.6875rem; /* 11px — meta, timestamps, badges */ --text-sm: 0.75rem; /* 12px — secondary UI */ --text-base: 0.8125rem; /* 13px — body UI, cards, buttons */ --text-md: 0.875rem; /* 14px — message text, input */ --text-lg: 1rem; /* 16px — section headings */ --text-xl: 1.125rem; /* 18px — page headings */ --display-sm: 1.375rem; /* 22px */ --display-md: 1.6rem; /* 26px */ --display-lg: 1.75rem; /* 28px */ --display-xl: 2rem; /* 32px */ --display-2xl: 2.5rem; /* 40px */ } /* ================================================================ FOCUS ================================================================ Before US-002 exactly one element in the product had a focus style (.input-wrap:focus-within). Everything else — every button, link and suggestion chip — was invisible to keyboard users, which the work item's usability clause does not allow. :where() keeps specificity at zero so component rules still win on every other property; this only ever adds the ring. --biru is 5.54:1 on the darkest ground, clearing the 3:1 that WCAG 2.2 asks of a focus indicator. ================================================================ */ :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--biru); outline-offset: 2px; } /* ================================================================ BUTTONS ================================================================ One family. Every button in US-001 repeated the same six declarations and then disagreed on the details — .btn-send used display:flex where the others used inline-flex, and the five of them carried four different font sizes. Composition: .btn plus one variant, plus an optional shape. ================================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; border: 1px solid transparent; border-radius: var(--radius-sm); transition: all var(--transition); flex-shrink: 0; } .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } /* Primary — blue fill, white label (6.82:1 at its lightest). The page's main action. */ .btn-primary { background: linear-gradient(135deg, var(--biru), var(--biru-deep)); color: #fff; box-shadow: var(--shadow-glow-biru); } .btn-primary:hover:not(:disabled) { filter: brightness(1.08); } /* Accent — the sky-to-deep ramp, reserved for send. */ .btn-accent { background: linear-gradient(135deg, var(--langit), var(--biru-deep)); color: #fff; } .btn-accent:hover:not(:disabled) { transform: scale(1.06); box-shadow: var(--shadow-glow-biru); } /* Ghost — outlined, for secondary navigation. */ .btn-ghost { background: transparent; border-color: var(--surface-border); color: var(--text-secondary); } .btn-ghost:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--surface-border-hover); color: var(--text-primary); } /* Quiet — chromeless, for in-message actions. */ .btn-quiet { background: transparent; color: var(--text-muted); font-weight: 500; } .btn-quiet:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); } /* Shapes */ .btn-pill { border-radius: var(--radius-full); padding: 0.4rem 0.9rem; } .btn-round { border-radius: 50%; padding: 0; } .btn-icon { padding: 0; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Form controls do not inherit the page font by default, so without this every