/* Innovation Dojo — component styles. Class-based so hover/focus/press states
   are real CSS. Every value comes from the token files. */

/* Button */
.dj-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-core);font-weight:var(--weight-bold);letter-spacing:var(--track-body);border:var(--border-2) solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:var(--motion-hover);text-decoration:none;white-space:nowrap;line-height:1}
.dj-btn:focus-visible{outline:var(--border-2) solid var(--focus-ring);outline-offset:2px}
.dj-btn:active{transform:translateY(1px)}
.dj-btn[disabled],.dj-btn[aria-disabled="true"]{opacity:.35;pointer-events:none}
.dj-btn--sm{height:34px;padding:0 14px;font-size:var(--text-sm)}
.dj-btn--md{height:44px;padding:0 20px;font-size:var(--text-base)}
.dj-btn--lg{height:54px;padding:0 28px;font-size:var(--text-lg)}
.dj-btn--primary{background:var(--dojo-black);color:var(--dojo-white)}
.dj-btn--primary:hover{background:var(--dojo-red);color:var(--dojo-white)}
.dj-btn--accent{background:var(--dojo-red);color:var(--dojo-white)}
.dj-btn--accent:hover{background:var(--accent-hover);color:var(--dojo-white)}
.dj-btn--secondary{background:var(--dojo-white);color:var(--dojo-black);border-color:var(--dojo-black)}
.dj-btn--secondary:hover{background:var(--dojo-black);color:var(--dojo-white)}
.dj-btn--ghost{background:transparent;color:var(--dojo-black);padding-left:6px;padding-right:6px}
.dj-btn--ghost:hover{color:var(--dojo-red)}
.dj-btn--inverse{background:var(--dojo-white);color:var(--dojo-black)}
.dj-btn--inverse:hover{background:var(--dojo-red);color:var(--dojo-white)}
.dj-btn--block{width:100%}

/* IconButton */
.dj-iconbtn{display:inline-flex;align-items:center;justify-content:center;border:var(--border-2) solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--dojo-black);cursor:pointer;transition:var(--motion-hover)}
.dj-iconbtn:hover{background:var(--alpha-press);color:var(--dojo-red)}
.dj-iconbtn:focus-visible{outline:var(--border-2) solid var(--focus-ring);outline-offset:2px}
.dj-iconbtn:active{transform:translateY(1px)}
.dj-iconbtn[disabled]{opacity:.35;pointer-events:none}
.dj-iconbtn--sm{width:34px;height:34px}.dj-iconbtn--md{width:44px;height:44px}.dj-iconbtn--lg{width:54px;height:54px}
.dj-iconbtn--outline{border-color:var(--dojo-black)}
.dj-iconbtn--solid{background:var(--dojo-black);color:var(--dojo-white)}
.dj-iconbtn--solid:hover{background:var(--dojo-red);color:var(--dojo-white)}

/* Badge + Tag */
.dj-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-core);font-weight:var(--weight-bold);font-size:var(--text-xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;padding:5px 9px;border-radius:var(--radius-sm);line-height:1}
.dj-badge--accent{background:var(--dojo-red);color:var(--dojo-white)}
.dj-badge--solid{background:var(--dojo-black);color:var(--dojo-white)}
.dj-badge--quiet{background:var(--surface-sunken);color:var(--dojo-black)}
.dj-badge--outline{background:transparent;color:var(--dojo-black);box-shadow:inset 0 0 0 1.5px var(--dojo-black)}
.dj-badge__dot{width:7px;height:7px;border-radius:var(--radius-full);background:currentColor}
.dj-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-core);font-weight:var(--weight-medium);font-size:var(--text-sm);letter-spacing:var(--track-body);padding:6px 12px;border-radius:var(--radius-md);background:var(--surface-sunken);color:var(--dojo-black);border:none;transition:var(--motion-hover)}
.dj-tag--interactive{cursor:pointer}
.dj-tag--interactive:hover{background:var(--surface-inset)}
.dj-tag--selected{background:var(--dojo-black);color:var(--dojo-white)}
.dj-tag__x{display:inline-flex;cursor:pointer;opacity:.5;font-size:14px;line-height:1}
.dj-tag__x:hover{opacity:1;color:var(--dojo-red)}

/* Card */
.dj-card{background:var(--surface-card);border-radius:var(--radius-md);position:relative;transition:var(--motion-hover)}
.dj-card--hairline{box-shadow:var(--shadow-hairline)}
.dj-card--raised{box-shadow:var(--shadow-card)}
.dj-card--sunken{background:var(--surface-sunken)}
.dj-card--invert{background:var(--surface-invert);color:var(--dojo-white)}
.dj-card--pad{padding:var(--space-5)}
.dj-card--interactive{cursor:pointer}
.dj-card--interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.dj-card__rule{height:var(--border-2);background:var(--dojo-red);width:44px;border-radius:2px}

/* Field shell (Input, Select) */
.dj-field{display:flex;flex-direction:column;gap:6px}
.dj-field__label{font-family:var(--font-core);font-weight:var(--weight-bold);font-size:var(--text-sm);letter-spacing:var(--track-body)}
.dj-field__hint{font-size:var(--text-xs);color:var(--text-muted)}
.dj-field__error{font-size:var(--text-xs);color:var(--dojo-red);font-weight:var(--weight-medium)}
.dj-input,.dj-select{font-family:var(--font-core);font-size:var(--text-base);font-weight:var(--weight-regular);letter-spacing:var(--track-body);color:var(--dojo-black);background:var(--dojo-white);border:var(--border-2) solid var(--alpha-rule);border-radius:var(--radius-md);height:46px;padding:0 14px;width:100%;transition:var(--motion-hover);box-sizing:border-box}
.dj-input::placeholder{color:var(--alpha-mute)}
.dj-input:hover,.dj-select:hover{border-color:var(--dojo-black)}
.dj-input:focus,.dj-select:focus{outline:none;border-color:var(--dojo-red)}
.dj-input--invalid{border-color:var(--dojo-red)}
.dj-input--textarea{height:auto;min-height:110px;padding:12px 14px;line-height:var(--leading-body);resize:vertical}
.dj-input[disabled],.dj-select[disabled]{background:var(--surface-sunken);color:var(--alpha-mute);pointer-events:none}
.dj-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dojo-black) 50%),linear-gradient(135deg,var(--dojo-black) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}

/* Checkbox / Radio / Switch */
.dj-choice{display:inline-flex;align-items:flex-start;gap:10px;font-family:var(--font-core);font-size:var(--text-base);cursor:pointer;line-height:1.4}
.dj-choice[data-disabled="true"]{opacity:.4;pointer-events:none}
.dj-choice__box{flex:none;width:22px;height:22px;border:var(--border-2) solid var(--dojo-black);border-radius:var(--radius-sm);background:var(--dojo-white);display:flex;align-items:center;justify-content:center;transition:var(--motion-hover);margin-top:1px}
.dj-choice__box--round{border-radius:var(--radius-full)}
.dj-choice:hover .dj-choice__box{border-color:var(--dojo-red)}
.dj-choice__box[data-checked="true"]{background:var(--dojo-red);border-color:var(--dojo-red)}
.dj-choice__tick{width:11px;height:11px;color:var(--dojo-white)}
.dj-choice__dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--dojo-white)}
.dj-switch{flex:none;width:46px;height:26px;border-radius:var(--radius-full);background:var(--grey-400);transition:var(--motion-hover);position:relative;cursor:pointer;border:none;padding:0}
.dj-switch[data-checked="true"]{background:var(--dojo-red)}
.dj-switch:focus-visible{outline:var(--border-2) solid var(--focus-ring);outline-offset:2px}
.dj-switch__knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:var(--radius-full);background:var(--dojo-white);transition:transform var(--dur-base) var(--ease-out)}
.dj-switch[data-checked="true"] .dj-switch__knob{transform:translateX(20px)}

/* Tabs */
.dj-tabs{display:flex;gap:var(--space-5);border-bottom:1px solid var(--alpha-hairline)}
.dj-tab{appearance:none;background:none;border:none;padding:0 0 12px;font-family:var(--font-core);font-weight:var(--weight-bold);font-size:var(--text-base);letter-spacing:var(--track-body);color:var(--alpha-mute);cursor:pointer;position:relative;transition:var(--motion-hover)}
.dj-tab:hover{color:var(--dojo-black)}
.dj-tab[aria-selected="true"]{color:var(--dojo-black)}
.dj-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--dojo-red);border-radius:2px}

/* Dialog */
.dj-dialog__scrim{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;padding:var(--space-5);z-index:50;animation:dj-fade var(--dur-base) var(--ease-standard)}
.dj-dialog{background:var(--dojo-white);border-radius:var(--radius-md);box-shadow:var(--shadow-lift);width:100%;max-width:520px;padding:var(--space-6);position:relative;animation:dj-rise var(--dur-slow) var(--ease-out)}
.dj-dialog__title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-title-3);letter-spacing:var(--track-title);margin:0 0 8px}
.dj-dialog__body{color:var(--alpha-mute);font-size:var(--text-base);margin:0}
.dj-dialog__actions{display:flex;gap:var(--space-2);justify-content:flex-end;margin-top:var(--space-6)}
.dj-dialog__close{position:absolute;top:16px;right:16px}
@keyframes dj-fade{from{opacity:0}to{opacity:1}}
@keyframes dj-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Toast */
.dj-toast{display:flex;align-items:center;gap:var(--space-3);background:var(--dojo-black);color:var(--dojo-white);border-radius:var(--radius-md);padding:14px 16px;box-shadow:var(--shadow-lift);font-size:var(--text-sm);font-weight:var(--weight-medium);min-width:280px;animation:dj-rise var(--dur-slow) var(--ease-out)}
.dj-toast__bar{width:4px;align-self:stretch;border-radius:2px;background:var(--dojo-red)}
.dj-toast--accent .dj-toast__bar{background:var(--dojo-red)}
.dj-toast--neutral .dj-toast__bar{background:var(--dojo-white)}
.dj-toast__close{margin-left:auto;background:none;border:none;color:inherit;opacity:.6;cursor:pointer;font-size:16px;line-height:1}
.dj-toast__close:hover{opacity:1}

/* Tooltip */
.dj-tooltip{position:relative;display:inline-flex}
.dj-tooltip__bubble{position:absolute;z-index:40;background:var(--dojo-black);color:var(--dojo-white);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--track-body);padding:7px 10px;border-radius:var(--radius-sm);white-space:nowrap;pointer-events:none;animation:dj-fade var(--dur-fast) var(--ease-standard)}
.dj-tooltip__bubble--top{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.dj-tooltip__bubble--bottom{top:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.dj-tooltip__bubble--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}
.dj-tooltip__bubble--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}

/* Eyebrow */
.dj-eyebrow{font-family:var(--font-core);font-weight:var(--weight-bold);font-size:var(--text-xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.dj-eyebrow__dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--dojo-red)}