/* The KM Studio — component styles. Classes are the styling API for the React
   primitives in components/. Every value resolves to a token. */

/* ── Button ─────────────────────────────────────────────────────────────── */
.km-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-body);font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);border:var(--border-width-hairline) solid transparent;border-radius:var(--radius-xs);cursor:pointer;text-decoration:none;transition:var(--transition-color),transform var(--duration-instant) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);white-space:nowrap}
.km-btn:active{transform:scale(var(--press-scale))}
.km-btn[disabled],.km-btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;transform:none}
.km-btn--sm{padding:9px 18px;font-size:var(--text-2xs)}
.km-btn--md{padding:13px 26px;font-size:var(--text-xs)}
.km-btn--lg{padding:17px 38px;font-size:var(--text-sm);letter-spacing:.26em}
.km-btn--full{width:100%}
.km-btn--primary{background:var(--navy-800);color:var(--white);border-color:var(--navy-800)}
.km-btn--primary:hover:not([disabled]){background:var(--navy-700);border-color:var(--navy-700)}
.km-btn--accent{background:var(--burgundy-800);color:var(--white);border-color:var(--burgundy-800)}
.km-btn--accent:hover:not([disabled]){background:var(--burgundy-700);border-color:var(--burgundy-700)}
.km-btn--secondary{background:transparent;color:var(--navy-800);border-color:var(--navy-800)}
.km-btn--secondary:hover:not([disabled]){background:var(--navy-800);color:var(--white)}
.km-btn--ghost{background:transparent;color:var(--navy-800);padding-left:0;padding-right:0;border-color:transparent;border-bottom-color:var(--border-hairline);border-radius:0}
.km-btn--ghost:hover:not([disabled]){color:var(--burgundy-800);border-bottom-color:var(--burgundy-800)}
.km-btn--inverse{background:var(--white);color:var(--navy-800);border-color:var(--white)}
.km-btn--inverse:hover:not([disabled]){background:var(--ivory-deep);border-color:var(--ivory-deep)}
.km-btn--inverse-outline{background:transparent;color:var(--white);border-color:var(--border-on-inverse)}
.km-btn--inverse-outline:hover:not([disabled]){border-color:var(--white);background:rgba(255,255,255,.08)}

/* ── IconButton ─────────────────────────────────────────────────────────── */
.km-iconbtn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:var(--border-width-hairline) solid transparent;border-radius:var(--radius-xs);color:var(--navy-800);cursor:pointer;transition:var(--transition-color),transform var(--duration-instant) var(--ease-standard)}
.km-iconbtn:hover:not([disabled]){background:var(--surface-hover)}
.km-iconbtn:active{transform:scale(var(--press-scale))}
.km-iconbtn[disabled]{opacity:.42;cursor:not-allowed}
.km-iconbtn--sm{width:32px;height:32px}
.km-iconbtn--md{width:40px;height:40px}
.km-iconbtn--lg{width:48px;height:48px}
.km-iconbtn--outline{border-color:var(--border-hairline)}
.km-iconbtn--outline:hover:not([disabled]){border-color:var(--navy-800)}
.km-iconbtn--inverse{color:var(--white)}
.km-iconbtn--inverse:hover:not([disabled]){background:rgba(255,255,255,.1)}

/* ── Icon ───────────────────────────────────────────────────────────────── */
.km-icon{display:inline-block;flex:none;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}

/* ── Eyebrow / Rule ─────────────────────────────────────────────────────── */
.km-eyebrow-el{display:block;font-family:var(--font-eyebrow);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.km-eyebrow-el--accent{color:var(--burgundy-800)}
.km-eyebrow-el--inverse{color:var(--text-on-inverse-muted)}
.km-rule-el{border:0;background:var(--border-strong);height:1px;margin:0}
.km-rule-el--accent{background:var(--burgundy-800)}
.km-rule-el--hairline{background:var(--border-hairline)}
.km-rule-el--inverse{background:var(--border-on-inverse)}
.km-rule-el--vertical{width:1px;height:auto;align-self:stretch}

/* ── Fields ─────────────────────────────────────────────────────────────── */
.km-field{display:flex;flex-direction:column;gap:var(--space-2)}
.km-field__label{font-family:var(--font-eyebrow);font-size:var(--text-2xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-secondary)}
.km-field__hint{font:var(--type-small);font-size:var(--text-xs);color:var(--text-muted)}
.km-field__error{font:var(--type-small);font-size:var(--text-xs);color:var(--burgundy-800)}
.km-input,.km-textarea,.km-select{width:100%;font-family:var(--font-body);font-size:var(--text-base);color:var(--text-primary);background:var(--white);border:var(--border-width-hairline) solid var(--border-hairline);border-radius:var(--radius-xs);padding:13px 14px;transition:var(--transition-color),box-shadow var(--duration-fast) var(--ease-standard)}
.km-input::placeholder,.km-textarea::placeholder{color:var(--taupe)}
.km-input:hover,.km-textarea:hover,.km-select:hover{border-color:var(--navy-300)}
.km-input:focus,.km-textarea:focus,.km-select:focus{outline:none;border-color:var(--navy-800);box-shadow:inset 0 0 0 1px var(--navy-800)}
.km-input[aria-invalid="true"],.km-textarea[aria-invalid="true"]{border-color:var(--burgundy-800)}
.km-input[disabled],.km-textarea[disabled],.km-select[disabled]{background:var(--navy-050);color:var(--taupe);cursor:not-allowed}
.km-textarea{min-height:120px;resize:vertical;line-height:var(--leading-body)}
.km-select{appearance:none;padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,var(--navy-800) 50%),linear-gradient(135deg,var(--navy-800) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.km-input--underline,.km-select--underline{border-color:transparent;border-bottom-color:var(--border-hairline);border-radius:0;padding-left:0;padding-right:0;background-color:transparent}
.km-input--underline:focus{box-shadow:none;border-bottom-color:var(--navy-800);border-bottom-width:var(--border-width-emphasis)}

/* ── Checkbox / Radio / Switch ──────────────────────────────────────────── */
.km-choice{display:flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;font:var(--type-body);font-size:var(--text-sm);color:var(--text-primary)}
.km-choice[data-disabled="true"]{opacity:.45;cursor:not-allowed}
.km-choice__box{flex:none;width:18px;height:18px;margin-top:2px;border:var(--border-width-hairline) solid var(--navy-400);border-radius:var(--radius-xs);background:var(--white);display:grid;place-items:center;transition:var(--transition-color)}
.km-choice:hover .km-choice__box{border-color:var(--navy-800)}
.km-choice__box--round{border-radius:var(--radius-circle)}
.km-choice__box[data-checked="true"]{background:var(--navy-800);border-color:var(--navy-800)}
.km-choice__box--round[data-checked="true"]{background:var(--white);border-color:var(--navy-800);border-width:var(--border-width-emphasis)}
.km-choice__tick{width:10px;height:10px;color:var(--white)}
.km-choice__dot{width:8px;height:8px;border-radius:var(--radius-circle);background:var(--navy-800)}
.km-choice__desc{display:block;color:var(--text-muted);font-size:var(--text-xs);margin-top:2px}
.km-switch{position:relative;flex:none;width:42px;height:22px;border-radius:var(--radius-pill);background:var(--navy-200);border:0;cursor:pointer;padding:0;transition:background-color var(--duration-base) var(--ease-standard)}
.km-switch[data-checked="true"]{background:var(--navy-800)}
.km-switch[disabled]{opacity:.45;cursor:not-allowed}
.km-switch__knob{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:var(--radius-circle);background:var(--white);box-shadow:var(--shadow-xs);transition:transform var(--duration-base) var(--ease-standard)}
.km-switch[data-checked="true"] .km-switch__knob{transform:translateX(20px)}

/* ── Card / ServiceCard ─────────────────────────────────────────────────── */
.km-card{background:var(--surface-card);border:var(--border-width-hairline) solid var(--border-hairline);border-radius:var(--radius-xs);transition:box-shadow var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}
.km-card--pad-sm{padding:var(--space-5)}
.km-card--pad-md{padding:var(--space-8)}
.km-card--pad-lg{padding:var(--space-12)}
.km-card--quiet{background:transparent;border-color:var(--border-hairline)}
.km-card--inverse{background:var(--navy-800);border-color:var(--navy-700);color:var(--text-on-inverse)}
.km-card--accent{background:var(--burgundy-800);border-color:var(--burgundy-800);color:var(--text-on-accent)}
.km-card--ivory{background:var(--ivory-deep);border-color:transparent}
.km-card--interactive{cursor:pointer}
.km-card--interactive:hover{box-shadow:var(--shadow-md);transform:translateY(var(--lift-y));border-color:var(--navy-200)}
.km-service{display:flex;flex-direction:column;gap:var(--space-4);text-align:left}
.km-service__index{font:var(--type-h4);font-family:var(--font-display);color:var(--taupe);letter-spacing:var(--tracking-wide)}
.km-service__title{font:var(--type-h3);color:inherit}
.km-service__body{font:var(--type-body);color:var(--text-secondary);max-width:var(--measure)}
.km-card--inverse .km-service__body,.km-card--accent .km-service__body{color:var(--text-on-inverse-muted)}
.km-service__meta{display:flex;gap:var(--space-6);font-family:var(--font-eyebrow);font-size:var(--text-2xs);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);padding-top:var(--space-4);border-top:1px solid var(--border-hairline)}
.km-card--inverse .km-service__meta{border-top-color:var(--border-on-inverse);color:var(--text-on-inverse-muted)}

/* ── Badge / Tag ────────────────────────────────────────────────────────── */
.km-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-eyebrow);font-size:var(--text-2xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;padding:5px 10px;border-radius:var(--radius-xs);border:var(--border-width-hairline) solid transparent}
.km-badge--navy{background:var(--navy-800);color:var(--white)}
.km-badge--accent{background:var(--burgundy-800);color:var(--white)}
.km-badge--outline{color:var(--navy-800);border-color:var(--navy-800)}
.km-badge--ivory{background:var(--ivory-deep);color:var(--navy-800)}
.km-badge--positive{background:var(--status-positive);color:var(--white)}
.km-badge--attention{background:var(--status-attention);color:var(--white)}
.km-tag{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--navy-800);background:transparent;border:var(--border-width-hairline) solid var(--border-hairline);border-radius:var(--radius-pill);padding:6px 14px;transition:var(--transition-color)}
.km-tag--selected{background:var(--navy-800);color:var(--white);border-color:var(--navy-800)}
.km-tag--clickable{cursor:pointer}
.km-tag--clickable:hover{border-color:var(--navy-800)}
.km-tag__remove{display:grid;place-items:center;width:14px;height:14px;border:0;background:transparent;color:inherit;cursor:pointer;padding:0;opacity:.6}
.km-tag__remove:hover{opacity:1}

/* ── Quote / StatBlock ──────────────────────────────────────────────────── */
.km-quote{display:flex;flex-direction:column;gap:var(--space-6);margin:0}
.km-quote__text{font:var(--type-quote);color:var(--text-primary);max-width:24ch;letter-spacing:var(--tracking-display)}
.km-quote--lg .km-quote__text{font-size:var(--text-3xl)}
.km-quote--inverse .km-quote__text{color:var(--white)}
.km-quote__attr{font-family:var(--font-eyebrow);font-size:var(--text-2xs);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);font-style:normal}
.km-quote--inverse .km-quote__attr{color:var(--text-on-inverse-muted)}
.km-stat{display:flex;flex-direction:column;gap:var(--space-2)}
.km-stat__value{font-family:var(--font-display);font-weight:var(--weight-light);font-size:var(--text-4xl);line-height:1;letter-spacing:var(--tracking-display);color:var(--text-primary)}
.km-stat--inverse .km-stat__value{color:var(--white)}
.km-stat--accent .km-stat__value{color:var(--burgundy-800)}
.km-stat__label{font-family:var(--font-eyebrow);font-size:var(--text-2xs);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.km-stat--inverse .km-stat__label{color:var(--text-on-inverse-muted)}

/* ── ColorSwatch / PaletteStrip ─────────────────────────────────────────── */
.km-swatch{display:flex;flex-direction:column;gap:var(--space-3)}
.km-swatch__chip{aspect-ratio:1;border-radius:var(--radius-xs);box-shadow:var(--shadow-inset-hairline)}
.km-swatch--round .km-swatch__chip{border-radius:var(--radius-circle)}
.km-swatch__name{font:var(--type-small);font-size:var(--text-xs);color:var(--text-primary);letter-spacing:var(--tracking-wide)}
.km-swatch__value{font-family:var(--font-body);font-size:var(--text-2xs);color:var(--text-muted);letter-spacing:var(--tracking-wide);text-transform:uppercase}
.km-palette{display:flex;flex-direction:column;gap:var(--space-3)}
.km-palette__strip{display:flex;overflow:hidden;border-radius:var(--radius-xs);box-shadow:var(--shadow-inset-hairline)}
.km-palette__cell{flex:1}
.km-palette__caption{font-family:var(--font-eyebrow);font-size:var(--text-2xs);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}

/* ── Seal ───────────────────────────────────────────────────────────────── */
.km-seal{display:grid;place-items:center;border-radius:var(--radius-circle);overflow:hidden}

/* ── NavBar ─────────────────────────────────────────────────────────────── */
.km-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-10);padding:var(--space-5) var(--space-10);background:var(--ivory);border-bottom:var(--border-width-hairline) solid var(--border-hairline)}
.km-nav--inverse{background:var(--navy-800);border-bottom-color:var(--border-on-inverse)}
.km-nav--transparent{background:transparent;border-bottom-color:transparent}
.km-nav--veiled{background:var(--veil-light);backdrop-filter:var(--blur-veil);-webkit-backdrop-filter:var(--blur-veil)}
.km-nav__links{display:flex;align-items:center;gap:var(--space-8);list-style:none;margin:0;padding:0}
.km-nav__link{font-family:var(--font-eyebrow);font-size:var(--text-2xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-secondary);background:none;border:0;padding:6px 0;cursor:pointer;border-bottom:1px solid transparent;transition:var(--transition-color)}
.km-nav__link:hover{color:var(--navy-800)}
.km-nav__link[aria-current="page"]{color:var(--navy-800);border-bottom-color:var(--burgundy-800)}
.km-nav--inverse .km-nav__link{color:var(--text-on-inverse-muted)}
.km-nav--inverse .km-nav__link:hover,.km-nav--inverse .km-nav__link[aria-current="page"]{color:var(--white)}
.km-nav__actions{display:flex;align-items:center;gap:var(--space-4)}

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.km-tabs{display:flex;gap:var(--space-8);border-bottom:var(--border-width-hairline) solid var(--border-hairline)}
.km-tabs__tab{font-family:var(--font-eyebrow);font-size:var(--text-2xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);background:none;border:0;border-bottom:var(--border-width-emphasis) solid transparent;padding:0 0 var(--space-4);margin-bottom:-1px;cursor:pointer;transition:var(--transition-color)}
.km-tabs__tab:hover{color:var(--navy-800)}
.km-tabs__tab[aria-selected="true"]{color:var(--navy-800);border-bottom-color:var(--navy-800)}
.km-tabs--accent .km-tabs__tab[aria-selected="true"]{border-bottom-color:var(--burgundy-800)}

/* ── Dialog ─────────────────────────────────────────────────────────────── */
.km-dialog__overlay{position:fixed;inset:0;background:var(--veil-dark);backdrop-filter:var(--blur-veil);-webkit-backdrop-filter:var(--blur-veil);display:grid;place-items:center;padding:var(--space-6);z-index:60;animation:km-fade var(--duration-base) var(--ease-out)}
.km-dialog{position:relative;background:var(--ivory);border-radius:var(--radius-xs);box-shadow:var(--shadow-lg);width:100%;max-width:520px;padding:var(--space-12);animation:km-rise var(--duration-base) var(--ease-out)}
.km-dialog--wide{max-width:760px}
.km-dialog__close{position:absolute;top:var(--space-5);right:var(--space-5)}
.km-dialog__title{font:var(--type-h3);margin-bottom:var(--space-3)}
.km-dialog__body{font:var(--type-body);color:var(--text-secondary);max-width:var(--measure)}
.km-dialog__actions{display:flex;gap:var(--space-3);margin-top:var(--space-8)}
@keyframes km-fade{from{opacity:0}to{opacity:1}}
@keyframes km-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.km-toast{display:flex;align-items:flex-start;gap:var(--space-4);background:var(--navy-800);color:var(--white);padding:var(--space-4) var(--space-5);border-radius:var(--radius-xs);box-shadow:var(--shadow-md);min-width:300px;max-width:420px;animation:km-rise var(--duration-base) var(--ease-out)}
.km-toast--accent{background:var(--burgundy-800)}
.km-toast--light{background:var(--white);color:var(--navy-800);box-shadow:var(--shadow-md),var(--shadow-inset-hairline)}
.km-toast__body{font:var(--type-small);flex:1}
.km-toast__title{display:block;font-family:var(--font-eyebrow);font-size:var(--text-2xs);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;opacity:.72;margin-bottom:4px}

/* ── Tooltip ────────────────────────────────────────────────────────────── */
.km-tooltip{position:relative;display:inline-flex}
.km-tooltip__bubble{position:absolute;z-index:40;background:var(--navy-900);color:var(--white);font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);padding:7px 11px;border-radius:var(--radius-xs);white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-sm);animation:km-fade var(--duration-fast) var(--ease-out)}
.km-tooltip__bubble--top{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.km-tooltip__bubble--bottom{top:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.km-tooltip__bubble--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}
.km-tooltip__bubble--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}