/* Brand Colors — Figma 784:9585 */
body[data-chapter="colors"] { --dock-y: 168; --dock-x: 160; }
.fh.th-lilac { color: var(--m-navy); }
.fh.th-lilac .fh__title { text-shadow: 0 10px 50px rgba(255,255,255,.25); }
.fh.th-lilac .fh__panel { box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 50px 120px -50px rgba(14,19,60,.35); background: rgba(255,255,255,.08); }
.fh.th-lilac .fh__s img { filter: blur(var(--strip-blur, 7px)) saturate(.7) contrast(1.3) brightness(1.08); opacity: .8; }

/* intro */
.co-intro { display: grid; gap: var(--s-4); max-width: 980px; margin-bottom: var(--s-6); }
.co-intro .shapes { font-size: clamp(18px, calc(26 * var(--fx)), 26px); }
.co-intro__copy { display: grid; gap: var(--s-3); color: var(--fg-soft); }
.co-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
.co-tools__group { display: flex; align-items: center; gap: var(--s-3); }

/* board: 2 × 2 big blocks, each over a strip of four accents (Figma layout) */
.co-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, calc(20 * var(--fx)), 20px); }
.cb { display: grid; grid-template-rows: auto auto; border-radius: 4px; overflow: hidden; }
.cb__main {
  position: relative; display: grid; align-content: space-between; gap: var(--s-5); min-height: clamp(280px, calc(470 * var(--fx)), 470px);
  padding: clamp(18px, calc(36 * var(--fx)), 36px); background: var(--c); color: var(--t); text-align: left; transition: filter .3s;
}
.cb__main.is-white { box-shadow: inset 0 0 0 1px rgba(14,19,60,.12); }
.cb__top { display: flex; justify-content: space-between; align-items: flex-start; }
.cb__kind { font: 600 var(--t-small)/1 var(--font-display); }
.cb__share { font: 600 clamp(32px, calc(56 * var(--fx)), 56px)/1 var(--font-display); letter-spacing: -.03em; }
.cb__kw { font: 600 var(--t-h3)/1.15 var(--font-display); max-width: 9em; }
.cb__vals { display: grid; gap: .35em; font-size: var(--t-micro); }
.cb__vals > span { justify-self: start; padding: .2em .45em; margin-left: -.45em; border-radius: 6px; text-align: left; transition: background .25s; }
.cb__vals > span:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.cb__vals > span b { font-weight: 600; opacity: .75; margin-right: .4em; }
.cb__tok { position: absolute; right: clamp(18px, calc(36 * var(--fx)), 36px); bottom: clamp(18px, calc(36 * var(--fx)), 36px); font: 500 var(--t-micro)/1 ui-monospace, Menlo, monospace; opacity: 0; transition: opacity .3s; }
.co-board.show-tokens .cb__tok, .co-board.show-tokens .ca__tok { opacity: .8; }
.cb__strip { display: grid; grid-template-columns: repeat(4, 1fr); }
.ca {
  position: relative; display: grid; align-content: start; gap: .3em; min-height: clamp(96px, calc(150 * var(--fx)), 150px);
  padding: clamp(10px, calc(16 * var(--fx)), 16px); background: var(--c); color: var(--t); text-align: left; font-size: var(--t-micro);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), z-index 0s;
}
.ca strong { font: 600 var(--t-small)/1.1 var(--font-display); }
.ca span { opacity: .8; }
.ca__tok { font: 500 11px/1 ui-monospace, Menlo, monospace; opacity: 0; transition: opacity .3s; margin-top: auto; }
.ca:hover, .ca:focus-visible { transform: translateY(-10px) scale(1.04); z-index: 2; box-shadow: 0 24px 40px -22px rgba(14,19,60,.55); }
.cb__main:hover { filter: saturate(1.08) brightness(1.03); }

.co-ratio { margin-top: var(--s-5); }
.co-ratio__bar { display: flex; height: 54px; border-radius: 999px; overflow: hidden; font: 600 var(--t-small)/1 var(--font-display); }
.co-ratio__bar span { display: flex; align-items: center; padding-inline: 1.2em; }
.co-ratio__a { flex: 60; background: linear-gradient(90deg, var(--m-purple) 0 50%, #fff 50%); color: #fff; box-shadow: inset 0 0 0 1px rgba(14,19,60,.1); }
.co-ratio__b { flex: 40; background: linear-gradient(90deg, var(--m-lilac) 0 50%, var(--m-navy) 50%); color: var(--m-navy); }

/* contrast checker */
.cc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-6); align-items: start; }
.cc__presets { display: grid; gap: var(--s-3); position: sticky; top: calc(var(--bar-h) + var(--s-3)); }
.cc__list { display: grid; gap: 10px; }
.cc__item {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: var(--s-3); padding: 10px 14px 10px 10px; border-radius: 14px;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); text-align: left; transition: box-shadow .25s, transform .4s var(--ease);
}
.cc__item:hover { box-shadow: inset 0 0 0 1.5px var(--m-navy); transform: translateX(4px); }
.cc__item[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--m-purple); }
.cc__chip { width: 56px; height: 44px; border-radius: 10px; display: grid; place-items: center; font: 700 18px/1 var(--font-display); background: var(--bg-c); color: var(--fg-c); box-shadow: inset 0 0 0 1px rgba(14,19,60,.12); }
.cc__item small { display: block; font-size: var(--t-micro); color: var(--fg-soft); font-family: ui-monospace, Menlo, monospace; }
.cc__item b { font: 600 var(--t-small)/1.2 var(--font-display); }
.cc__item em { font: 700 var(--t-small)/1 var(--font-display); font-style: normal; }

.cc__tool { position: relative; display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-card); background: #F1F1F1; }
.cc__pickers { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-2); align-items: end; }
.cc__pick { display: grid; gap: 6px; }
.cc__field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 12px 16px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(14,19,60,.14); font: 500 var(--t-small)/1 ui-monospace, Menlo, monospace; transition: box-shadow .25s; }
.cc__field:hover, .cc__field[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--m-navy); }
.cc__field { flex-direction: row-reverse; }
.cc__field i { width: 26px; height: 26px; border-radius: 6px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(14,19,60,.15); }
.cc__swap { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(14,19,60,.14); transition: transform .5s var(--ease), box-shadow .25s; }
.cc__swap:hover { box-shadow: inset 0 0 0 1.5px var(--m-navy); transform: rotate(180deg); }
.cc__pop { position: absolute; z-index: 5; top: calc(100% + 8px); left: 0; right: 0; display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 30px 60px -24px rgba(14,19,60,.45), inset 0 0 0 1px rgba(14,19,60,.08); }
.cc__pop button { aspect-ratio: 1; border-radius: 8px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(14,19,60,.15); transition: transform .3s var(--ease); }
.cc__pop button:hover, .cc__pop button:focus-visible { transform: scale(1.15); }
.cc__pop button[aria-selected="true"] { box-shadow: inset 0 0 0 1px rgba(14,19,60,.15), 0 0 0 2px #fff, 0 0 0 4px var(--m-purple); }
.cc__preview { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: 14px; background: var(--pbg); color: var(--pfg); transition: background .5s var(--ease), color .5s var(--ease); min-height: 220px; align-content: center; box-shadow: inset 0 0 0 1px rgba(14,19,60,.08); }
.cc__sample-lg { font: 600 var(--t-h3)/1.15 var(--font-display); letter-spacing: -.015em; }
.cc__sample-sm { font-size: var(--t-small); max-width: 52ch; }
.cc__score { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: 12px; background: var(--rate-bg, #FFF6C7); color: var(--rate-fg, #7A4A00); transition: background .4s, color .4s; }
.cc__ratio { display: grid; gap: 4px; }
.cc__ratio strong { font: 700 clamp(40px, calc(64 * var(--fx)), 64px)/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cc__rating { display: grid; justify-items: end; gap: 6px; font: 600 var(--t-small)/1 var(--font-display); }
.cc__stars { letter-spacing: .12em; font-size: 18px; }
.cc__stars i { font-style: normal; opacity: .25; } .cc__stars i.on { opacity: 1; }
.cc__wcag { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc__wcag div { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; background: #fff; font: 500 var(--t-small)/1 var(--font-display); }
.cc__wcag div span:first-child { margin-right: auto; }
.cc__wcag em { font: 700 11px/1 var(--font-display); font-style: normal; letter-spacing: .08em; padding: .45em .6em; border-radius: 6px; background: var(--b-bg, #E7F8EE); color: var(--b-fg, #116B3A); }

/* UI palette */
.pal { display: grid; gap: var(--s-7); }
.pal__sec { display: grid; gap: var(--s-4); }
.pal__intro { display: grid; gap: .5em; max-width: 72ch; color: var(--fg-soft); }
.pal__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-5); align-items: center; padding-block: var(--s-3); border-top: 1px solid var(--line); }
.pal__row h4 { grid-column: 1 / -1; font: 600 var(--t-h4)/1.2 var(--font-display); }
.pal__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-2); }
.pc { display: grid; gap: 10px; padding: 10px 10px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(14,19,60,.1); text-align: left; transition: box-shadow .25s, transform .4s var(--ease); }
.pc:hover, .pc:focus-visible { box-shadow: inset 0 0 0 1.5px var(--m-navy); transform: translateY(-4px); }
.pc__sw { position: relative; height: 96px; border-radius: 8px; background: var(--sw); color: var(--lbl); padding: 8px 10px; display: flex; flex-direction: column; justify-content: space-between; }
.pc__sw small { align-self: flex-end; font: 500 11px/1 var(--font-display); }
.pc__sw span { font: 500 13px/1 var(--font-display); }
.pc b { font: 600 13px/1 ui-monospace, Menlo, monospace; }
.pc p { font-size: 13px; line-height: 1.35; color: var(--fg-soft); }
.pc__flag { display: inline-block; margin-left: 6px; font: 600 10px/1 var(--font-display); letter-spacing: .06em; color: #B45309; background: #FEF3C7; padding: 3px 5px; border-radius: 4px; vertical-align: middle; }
/* live usage preview: Light background, Dark text / outline, Default icon (from the usage notes) */
.toastx { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: var(--light); color: var(--dark); box-shadow: inset 0 0 0 1.5px var(--dark); font: 600 var(--t-small)/1.2 var(--font-display); transition: transform .5s var(--ease); }
.toastx i { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--def); display: grid; place-items: center; color: #fff; font: 700 15px/1 var(--font-display); font-style: normal; }
.toastx small { display: block; font: 500 12px/1.3 var(--font-display); opacity: .8; margin-top: 3px; }
.pal__row:hover .toastx { transform: translateX(6px); }

@media (max-width: 900px) {
  .co-board { grid-template-columns: 1fr; }
  .cc { grid-template-columns: 1fr; }
  .cc__presets { position: static; }
  .cc__pickers { grid-template-columns: 1fr; }
  .cc__pop { grid-template-columns: repeat(5, 1fr); }
  .pal__row { grid-template-columns: 1fr; }
}
.cc__item { grid-template-columns: 56px minmax(0, 1fr) auto; }
.cc__item small { overflow-wrap: anywhere; }
.cc__presets, .cc__tool { min-width: 0; }
@media (max-width: 900px) { .cc { grid-template-columns: minmax(0, 1fr); } .cc__wcag { grid-template-columns: 1fr; } .cc__score { flex-wrap: wrap; } }