/*
 * Riku brand tokens — Direction A, "Sticker".
 *
 * Extracted from marketing/directions/a-sticker.html (the brand spec) so the
 * app reskin and the storyboard share one source. Plain CSS custom properties
 * plus a handful of component recipes; no build step.
 *
 * Fonts: load Fredoka 600/700 and Figtree 400-700 alongside this file:
 *   https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Figtree:wght@400;500;600;700&display=swap
 *
 * Contrast rule: white on --rk-magenta is ~3.6:1, so it is only allowed at
 * 18px+ bold (large text). Small magenta text uses --rk-magenta-ink.
 */

:root {
  /* ---- Palette (from the brand) ---- */
  --rk-magenta: #FD228F;      /* the one primary action, accents, focus */
  --rk-pale: #FEA6CB;         /* pale pink: tags, plum-band accents */
  --rk-tint: #FEEDF6;         /* pink-tint surface: app background */
  --rk-plum: #2C1233;         /* text, default buttons, the dark band */
  --rk-plum-soft: #5B3F63;    /* secondary text */
  --rk-plum-faint: #8A7390;   /* tertiary text, placeholders (on white only) */
  --rk-paper: #FFFFFF;        /* cards, sticker borders */
  --rk-line: #F5CFE2;         /* hairlines, field borders, card lip */
  --rk-mascot-bg: #FBEFF1;    /* the opaque square behind the PNG poses */

  /* Magenta-ink (small magenta text, AA) and the warm status colours swap with
     the theme, so they live in the role blocks below. */
  --rk-on-band: #E9D5EE;  /* body text on the plum band */

  /* ---- Type ---- */
  --rk-font-display: "Fredoka", "Figtree", system-ui, sans-serif;
  --rk-font-body: "Figtree", system-ui, sans-serif;
  --rk-text-xs: 12px;
  --rk-text-sm: 14px;
  --rk-text-md: 16px;   /* app body */
  --rk-text-lg: 18px;   /* marketing body, large-text threshold */
  --rk-h3: 20px;
  --rk-h2: 28px;
  --rk-h1: 36px;
  --rk-eyebrow-tracking: .08em;

  /* ---- Shape ---- */
  --rk-r-xs: 8px;
  --rk-r-sm: 12px;
  --rk-r-md: 16px;     /* fields, chips */
  --rk-r-lg: 22px;     /* bubbles */
  --rk-r-xl: 28px;     /* cards */
  --rk-r-2xl: 36px;    /* sticker, feature panels */
  --rk-r-pill: 999px;

  /* ---- Depth (lip, card and plum-offset shadows are roles, below) ---- */
  --rk-offset: 4px 4px 0 var(--rk-magenta);         /* the signature button shadow */
  --rk-offset-hover: 6px 6px 0 var(--rk-magenta);

  /* ---- Space ---- */
  --rk-s1: 4px; --rk-s2: 8px; --rk-s3: 12px; --rk-s4: 16px;
  --rk-s5: 24px; --rk-s6: 32px; --rk-s7: 48px;
}

/* ================= Semantic roles =================
 *
 * Components paint with these, never with the palette above, so dark mode is just
 * a second set of values (docs/notes/dark-mode.md has the light/dark table).
 * `[data-theme="light"]` repeats the light set so a subtree can opt out of dark:
 * the shared chat page and the builder preview wear the customer's theme.
 */
:root,
[data-theme="light"] {
  color-scheme: light;
  --rk-bg: var(--rk-tint);              /* the page */
  --rk-surface: var(--rk-paper);        /* cards, sidebar, sheets */
  --rk-surface-sunk: var(--rk-tint);    /* table rows, pills, wells inside a card */
  --rk-hover: var(--rk-pale);           /* hover fill behind --rk-text */
  --rk-field: var(--rk-paper);          /* inputs, selects, textareas */
  --rk-text: var(--rk-plum);
  --rk-text-soft: var(--rk-plum-soft);
  --rk-text-faint: var(--rk-plum-faint); /* placeholders, captions (large or decorative) */
  --rk-border: var(--rk-line);
  --rk-solid: var(--rk-plum);           /* default button, selected segment, toast */
  --rk-on-solid: #FFFFFF;
  --rk-solid-accent: var(--rk-pale);    /* small accent text on --rk-solid (toast action, operator label) */
  --rk-band: var(--rk-plum);            /* the emphasis band; text on it is white / --rk-on-band */
  --rk-on-ink: #FFFFFF;                 /* text on a --rk-magenta-ink fill */
  --rk-mark: var(--rk-plum);            /* small filled marks: workspace initial, step numbers */
  --rk-on-mark: #FFFFFF;
  --rk-current: var(--rk-plum);         /* the current nav entry */
  --rk-on-current: #FFFFFF;
  --rk-current-mark: 0 0 #0000;         /* its edge mark (dark: a magenta bar) */
  --rk-primary: var(--rk-magenta);
  --rk-scrim: rgba(44, 18, 51, .4);
  --rk-focus-ring: rgba(253, 34, 143, .14);

  --rk-magenta-ink: #D10F72;           /* magenta for small text (AA) */
  --rk-ok: #1F7A4D;   --rk-ok-bg: #E3F5EA;
  --rk-warn: #8A5300; --rk-warn-bg: #FFF1D6;
  --rk-bad: #B3123E;  --rk-bad-bg: #FFE1E8;

  --rk-lip: 0 2px 0 var(--rk-line);
  --rk-shadow-card: 0 2px 0 var(--rk-line), 0 20px 40px -24px rgba(44, 18, 51, .40);
  --rk-shadow-pop: 0 2px 0 var(--rk-line), 0 18px 34px -18px rgba(44, 18, 51, .35);
  --rk-offset-plum: 4px 4px 0 var(--rk-plum);
  --rk-offset-plum-hover: 6px 6px 0 var(--rk-plum);
}

/* Dark (storyboard 7.1). Plum surfaces on a near-black plum page; magenta stays the
   one accent; sticker tiles keep their white frame round the pale-pink pose square,
   and the lockup keeps its white badge. White on magenta is still 18px+ bold only.
   `[data-theme="dark"]` also works on a subtree (the storyboard's 7.1 mock).
   The two blocks below must stay identical (src/styles/tokens.test.ts checks). */
[data-theme="dark"] {
  color-scheme: dark;
  --rk-bg: #1C0B21;
  --rk-surface: #2C1233;
  --rk-surface-sunk: #3A1C42;
  --rk-hover: #4B2A54;
  --rk-field: #220E28;
  --rk-text: #FCEFF6;
  --rk-text-soft: #D9C2DF;
  --rk-text-faint: #B79BBE;
  --rk-border: #4B2A54;
  --rk-solid: #FCEFF6;
  --rk-on-solid: #2C1233;
  --rk-solid-accent: #B80C63;
  --rk-band: #3F1C48;
  --rk-on-ink: #2C1233;
  --rk-mark: #FF6FB4;
  --rk-on-mark: #2C1233;
  --rk-current: #3A1C42;
  --rk-on-current: #FCEFF6;
  --rk-current-mark: inset 3px 0 0 #FD228F;
  --rk-primary: var(--rk-magenta);
  --rk-scrim: rgba(8, 2, 10, .66);
  --rk-focus-ring: rgba(253, 34, 143, .32);

  --rk-magenta-ink: #FF6FB4;
  --rk-ok: #7FDBA8;   --rk-ok-bg: #143A29;
  --rk-warn: #F4C46E; --rk-warn-bg: #3D2A0C;
  --rk-bad: #FF8FAB;  --rk-bad-bg: #4A1027;

  --rk-lip: 0 2px 0 #12061A;
  --rk-shadow-card: 0 2px 0 #12061A, 0 20px 40px -24px rgba(0, 0, 0, .7);
  --rk-shadow-pop: 0 2px 0 #12061A, 0 18px 34px -18px rgba(0, 0, 0, .6);
  --rk-offset-plum: 4px 4px 0 var(--rk-pale);
  --rk-offset-plum-hover: 6px 6px 0 var(--rk-pale);
}

/* No preference stored (or no JS yet): follow the system. The inline script in
   index.html normally resolves this to an explicit data-theme before paint. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --rk-bg: #1C0B21;
    --rk-surface: #2C1233;
    --rk-surface-sunk: #3A1C42;
    --rk-hover: #4B2A54;
    --rk-field: #220E28;
    --rk-text: #FCEFF6;
    --rk-text-soft: #D9C2DF;
    --rk-text-faint: #B79BBE;
    --rk-border: #4B2A54;
    --rk-solid: #FCEFF6;
    --rk-on-solid: #2C1233;
    --rk-solid-accent: #B80C63;
    --rk-band: #3F1C48;
    --rk-on-ink: #2C1233;
    --rk-mark: #FF6FB4;
    --rk-on-mark: #2C1233;
    --rk-current: #3A1C42;
    --rk-on-current: #FCEFF6;
    --rk-current-mark: inset 3px 0 0 #FD228F;
    --rk-primary: var(--rk-magenta);
    --rk-scrim: rgba(8, 2, 10, .66);
    --rk-focus-ring: rgba(253, 34, 143, .32);

    --rk-magenta-ink: #FF6FB4;
    --rk-ok: #7FDBA8;   --rk-ok-bg: #143A29;
    --rk-warn: #F4C46E; --rk-warn-bg: #3D2A0C;
    --rk-bad: #FF8FAB;  --rk-bad-bg: #4A1027;

    --rk-lip: 0 2px 0 #12061A;
    --rk-shadow-card: 0 2px 0 #12061A, 0 20px 40px -24px rgba(0, 0, 0, .7);
    --rk-shadow-pop: 0 2px 0 #12061A, 0 18px 34px -18px rgba(0, 0, 0, .6);
    --rk-offset-plum: 4px 4px 0 var(--rk-pale);
    --rk-offset-plum-hover: 6px 6px 0 var(--rk-pale);
  }
}

/* ================= Component recipes ================= */

/* Button: plum fill, magenta offset shadow. One .rk-btn--primary per screen. */
.rk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--rk-font-display); font-weight: 600; font-size: 16px; line-height: 1;
  padding: 12px 18px; border-radius: 14px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--rk-solid); color: var(--rk-on-solid); box-shadow: var(--rk-offset);
  transition: transform .12s ease, box-shadow .12s ease;
}
.rk-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--rk-offset-hover); }
.rk-btn:focus-visible { outline: 3px solid var(--rk-magenta); outline-offset: 4px; }
/* Primary = magenta fill, plum offset. Label must be 18px+ bold (contrast). */
.rk-btn--primary { background: var(--rk-magenta); color: #fff; font-size: 18px; font-weight: 700; box-shadow: var(--rk-offset-plum); }
.rk-btn--light { background: var(--rk-paper); color: var(--rk-plum); box-shadow: var(--rk-offset-plum); }
.rk-btn--ghost { background: transparent; color: var(--rk-text); box-shadow: none; border: 2px solid var(--rk-border); }
.rk-btn--ghost:hover { transform: none; box-shadow: none; background: var(--rk-surface-sunk); }
.rk-btn--danger { background: var(--rk-bad); box-shadow: var(--rk-offset-plum); }
.rk-btn--sm { font-size: 14px; padding: 8px 12px; border-radius: 11px; box-shadow: 3px 3px 0 var(--rk-magenta); }
.rk-btn--ghost.rk-btn--sm { box-shadow: none; }
.rk-btn[disabled], .rk-btn.is-disabled { opacity: .45; transform: none; cursor: not-allowed; }

/* Card: white, big radius, pink lip. */
.rk-card {
  background: var(--rk-surface); color: var(--rk-text);
  border-radius: var(--rk-r-xl); padding: var(--rk-s5);
  box-shadow: var(--rk-shadow-card);
}
.rk-card--flat { box-shadow: var(--rk-lip); }

/* Sticker tile: die-cut white border round a mascot pose, slight tilt.
   Mascot moments only (see design/storyboard/README.md pose map). */
.rk-sticker {
  display: inline-block; background: #fff; padding: 8px; border-radius: 30px;
  box-shadow: var(--rk-shadow-pop); transform: rotate(-4deg);
}
.rk-sticker img { display: block; width: 100%; border-radius: 22px; }
.rk-sticker--right { transform: rotate(3deg); }
.rk-sticker--sm { padding: 5px; border-radius: 20px; }
.rk-sticker--sm img { border-radius: 15px; }

/* Lockup badge: SVG lockups have a white rect, so they live on white. */
.rk-badge { display: block; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--rk-lip); }
.rk-badge img { display: block; width: 100%; height: 100%; }

/* Input */
.rk-field { display: grid; gap: 6px; }
.rk-label { font-size: 13px; font-weight: 700; color: var(--rk-text); }
.rk-hint { font-size: 13px; color: var(--rk-text-soft); }
.rk-input {
  font: 500 15px/1.4 var(--rk-font-body); color: var(--rk-text);
  background: var(--rk-field); border: 2px solid var(--rk-border); border-radius: var(--rk-r-md);
  padding: 11px 14px; width: 100%;
}
.rk-input::placeholder { color: var(--rk-text-faint); }
.rk-input:focus, .rk-input.is-focus { outline: none; border-color: var(--rk-magenta); box-shadow: 0 0 0 4px var(--rk-focus-ring); }
.rk-input.is-error { border-color: var(--rk-bad); }
.rk-error-text { font-size: 13px; font-weight: 600; color: var(--rk-bad); }

/* Pill / tag */
.rk-pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 700; line-height: 1; padding: 6px 10px; border-radius: var(--rk-r-pill);
  background: var(--rk-surface-sunk); color: var(--rk-text);
}
.rk-pill--pale { background: var(--rk-pale); color: var(--rk-plum); }
.rk-pill--plum { background: var(--rk-solid); color: var(--rk-on-solid); }
.rk-pill--magenta { background: var(--rk-magenta-ink); color: var(--rk-on-ink); }
.rk-pill--outline { background: transparent; border: 2px solid var(--rk-pale); }
.rk-pill--ok { background: var(--rk-ok-bg); color: var(--rk-ok); }
.rk-pill--warn { background: var(--rk-warn-bg); color: var(--rk-warn); }
.rk-pill--bad { background: var(--rk-bad-bg); color: var(--rk-bad); }

/* Table row: rows are rounded tint strips, not ruled lines. */
.rk-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 14px; }
.rk-table th {
  text-align: left; font: 600 12px var(--rk-font-display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--rk-text-soft); padding: 0 12px 2px;
}
.rk-table td { background: var(--rk-surface-sunk); padding: 11px 12px; }
.rk-table td:first-child { border-radius: 14px 0 0 14px; }
.rk-table td:last-child { border-radius: 0 14px 14px 0; }
.rk-table tr.is-muted td { opacity: .55; }

/* Eyebrow + headings */
.rk-eyebrow {
  font: 600 13px var(--rk-font-display); letter-spacing: var(--rk-eyebrow-tracking);
  text-transform: uppercase; color: var(--rk-magenta-ink);
}
.rk-display { font-family: var(--rk-font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }

/* Chat bubbles (the app's own, and the public runtime default) */
.rk-bubble { background: var(--rk-surface); border-radius: var(--rk-r-lg); padding: 12px 15px; font-size: 15px; line-height: 1.45; box-shadow: var(--rk-lip); }
.rk-bubble--me { background: var(--rk-plum); color: #fff; box-shadow: none; }
.rk-bubble .rk-who { font: 600 11px var(--rk-font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--rk-magenta-ink); margin-bottom: 3px; }
.rk-bubble--me .rk-who { color: var(--rk-pale); }

/* The dark plum band for emphasis */
.rk-band { background: var(--rk-band); color: #fff; border-radius: var(--rk-r-2xl); }
.rk-band p { color: var(--rk-on-band); }

/* Toast */
.rk-toast {
  display: inline-flex; align-items: center; gap: 10px; background: var(--rk-solid); color: var(--rk-on-solid);
  border-radius: 16px; padding: 12px 16px; font-size: 14px; font-weight: 600; box-shadow: 4px 4px 0 var(--rk-magenta);
}