/* ================================================================
   PRABOWO CHATBOT — Design System (light / Merah-Putih)
   ================================================================

   THE single source of truth for design tokens. Before US-002 these
   were duplicated verbatim in chatbot.html, marketplace.html and the
   (now deleted) layout/main.html, so every palette change had to be
   made three times and drifted in practice.

   GROUND: white. The product reads as Merah-Putih — the flag's white
   with its red — rather than the generic dark navy inherited from the
   Soekarno bot. Cards and rails sit on a warm off-white so surfaces
   separate without borders having to do all the work.

   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 accent ramps run
   base -> -strong -> -deep, meaning increasing emphasis. On a light
   ground more emphasis means DARKER, which is why these are not named
   "-light"/"-bright" any more: on white, a lighter gold is a weaker
   gold, and a token called --gold-bright holding a dark value is a
   trap for the next person.

   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; hoisting a
   partial chain here would let the wrong declaration win.
   ================================================================ */

:root {
    /* ── Grounds. --bg-hover is the darkest and therefore the one every
       foreground token has to survive. ── */
    --bg-primary:       #ffffff;
    --bg-secondary:     #faf9f7;
    --bg-tertiary:      #f4f1ec;
    --bg-elevated:      #f7f5f1;
    --bg-hover:         #ece8e1;

    --surface:          #faf9f7;
    --surface-light:    #f4f1ec;
    --surface-border:   rgba(0, 0, 0, 0.10);
    --surface-border-hover: rgba(0, 0, 0, 0.20);

    /* ── Presidential gold. Primary brand and primary actions.
       The dark-theme #c9a227 is only 2.42:1 on white — unusable for
       text or thin icons — so the ramp is re-derived, not reused. ── */
    --gold:             #7d6410;   /* 4.64:1 worst case */
    --gold-strong:      #6a550d;   /* 5.89:1 */
    --gold-deep:        #574409;   /* 7.69:1 */
    --gold-dim:         rgba(125, 100, 16, 0.12);
    --gold-glow:        rgba(125, 100, 16, 0.18);

    /* ── Flag red. Fills and emphasis. Unlike every other brand colour
       the red survived the inversion, but it is darkened so white
       labels on it stay comfortable (6.70:1). ── */
    --red:              #b31f1f;
    --red-deep:         #971a1a;
    --red-dim:          rgba(179, 31, 31, 0.10);
    --red-glow:         rgba(179, 31, 31, 0.18);

    /* ── Khaki / olive — the safari-shirt signal, and the warm
       secondary that lets gold stay reserved for primary actions. ── */
    --khaki:            #6f6244;
    --khaki-strong:     #5d5238;
    --khaki-dim:        rgba(111, 98, 68, 0.12);
    --olive:            #5f6647;

    /* ── Biru — informational / system voice ONLY: links, the
       AI-simulation notice, Bobby's collar. Deliberately kept out of
       headers, primary buttons and large fills: it is the one token
       borrowed from the 2024 campaign identity, and this product must
       not read as partisan. See US-002 decision D1. ── */
    --biru:             #17608f;
    --biru-strong:      #124d72;
    --biru-dim:         rgba(23, 96, 143, 0.10);

    /* ── Bobby Kertanegara — mascot two-tone. --bobby-cream is a fill
       INSIDE the mascot, adjacent to the fur, never text on the page:
       it is held to fur contrast (3.16:1), not to AA against white. ── */
    --bobby-fur:        #8a5a1e;
    --bobby-cream:      #d9b98a;

    /* ── Text ── */
    --text-primary:     #1a1d21;   /* 13.85:1 worst case */
    --text-secondary:   #4a4f57;   /*  6.75:1 */
    --text-muted:       #5c6169;   /*  5.10:1 — the US-001 value was 3.00:1 */
    --text-strong:      #0d0f12;   /* 15.72:1 — maximum emphasis */

    --accent-green:     #1a6e2d;   /* online  — 5.19:1 */
    --accent-red:       #b3261e;   /* offline — 5.35:1 */

    /* ── Elevation. On a light ground depth comes from soft neutral
       shadow, not from glow. ── */
    --shadow-sm:        0 1px 2px rgba(24, 20, 14, 0.06);
    --shadow-md:        0 4px 16px rgba(24, 20, 14, 0.10);
    --shadow-lg:        0 8px 32px rgba(24, 20, 14, 0.14);
    --shadow-glow-gold: 0 2px 12px rgba(125, 100, 16, 0.20);
    --shadow-glow-red:  0 2px 12px rgba(179, 31, 31, 0.18);

    --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 ──
       Serif carries the persona's voice — the name, headings, quotes.
       Inter carries the interface. Keeping the split explicit stops the
       two drifting into each other. ── */
    --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-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. --gold is 4.64:1
   on the lightest 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(--gold);
    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 — gold fill, white label (5.67:1). The page's main action. */
.btn-primary {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: #fff;
    box-shadow: var(--shadow-glow-gold);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }

/* Accent — the red-to-gold ramp, reserved for send. */
.btn-accent {
    background: linear-gradient(135deg, var(--red), var(--gold));
    color: #fff;
}
.btn-accent:hover:not(:disabled) {
    transform: scale(1.06);
    box-shadow: var(--shadow-glow-gold);
}

/* 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;
}