/* SAVVA component styles. Classes are consumed by the React primitives in components/**.
   Everything here reads from the semantic token layer — no raw hexes below this line. */

/* ---------- Button ---------- */
.savva-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-sans);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:var(--tracking-label);border:1px solid transparent;border-radius:var(--radius-xs);cursor:pointer;text-decoration:none;transition:var(--transition-tone),box-shadow var(--duration-fast) var(--ease-standard);white-space:nowrap}
.savva-btn--sm{font-size:var(--size-micro);padding:8px 16px}
.savva-btn--md{font-size:var(--size-label);padding:12px 24px}
.savva-btn--lg{font-size:var(--size-body-sm);padding:16px 34px}
.savva-btn--primary{background:var(--interactive-primary);color:var(--savva-canvas-ivory);border-color:var(--interactive-primary)}
.savva-btn--primary:hover{background:var(--interactive-primary-hover);border-color:var(--interactive-primary-hover)}
.savva-btn--primary:active{background:var(--interactive-primary-active)}
.savva-btn--accent{background:var(--interactive-accent);color:var(--savva-night-camp);border-color:var(--interactive-accent)}
.savva-btn--accent:hover{background:var(--interactive-accent-hover);border-color:var(--interactive-accent-hover);color:var(--savva-canvas-ivory)}
.savva-btn--accent:active{background:var(--interactive-accent-active)}
.savva-btn--outline{background:transparent;color:var(--text-body);border-color:var(--border-strong)}
.savva-btn--outline:hover{background:var(--savva-night-camp);color:var(--savva-canvas-ivory)}
.savva-btn--ghost{background:transparent;color:var(--text-body);border-color:transparent}
.savva-btn--ghost:hover{background:var(--interactive-quiet-hover)}
.savva-btn--inverse{background:var(--savva-canvas-ivory);color:var(--savva-night-camp);border-color:var(--savva-canvas-ivory)}
.savva-btn--inverse:hover{background:var(--savva-kalahari-gold);border-color:var(--savva-kalahari-gold)}
.savva-btn--inverse-outline{background:transparent;color:var(--savva-canvas-ivory);border-color:rgba(244,239,230,0.4)}
.savva-btn--inverse-outline:hover{background:rgba(244,239,230,0.1);border-color:var(--savva-canvas-ivory)}
.savva-btn[disabled],.savva-btn[aria-disabled="true"]{background:var(--interactive-disabled-surface);border-color:var(--interactive-disabled-surface);color:var(--interactive-disabled-text);cursor:not-allowed}
.savva-btn--full{width:100%}

/* ---------- IconButton ---------- */
.savva-iconbtn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-xs);color:var(--text-body);cursor:pointer;transition:var(--transition-tone)}
.savva-iconbtn--sm{width:32px;height:32px}
.savva-iconbtn--md{width:44px;height:44px}
.savva-iconbtn--lg{width:52px;height:52px}
.savva-iconbtn--quiet:hover{background:var(--interactive-quiet-hover)}
.savva-iconbtn--outline{border-color:var(--border-default)}
.savva-iconbtn--outline:hover{border-color:var(--border-strong)}
.savva-iconbtn--solid{background:var(--interactive-primary);color:var(--savva-canvas-ivory);border-color:var(--interactive-primary)}
.savva-iconbtn--solid:hover{background:var(--interactive-primary-hover)}
.savva-iconbtn[disabled]{color:var(--interactive-disabled-text);cursor:not-allowed}

/* ---------- Icon ---------- */
.savva-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;color:currentColor}
.savva-icon svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.5;fill:none}

/* ---------- Logo ---------- */
.savva-logo{display:inline-block;flex:none}
.savva-logo img{display:block;width:100%;height:auto}

/* ---------- Card ---------- */
.savva-card{background:var(--surface-card);border:1px solid var(--border-quiet);border-radius:var(--radius-md);overflow:hidden;transition:var(--transition-surface),var(--transition-tone)}
.savva-card--flat{box-shadow:none}
.savva-card--raised{box-shadow:var(--shadow-raised);border-color:transparent}
.savva-card--outline{background:transparent;border-color:var(--border-default)}
.savva-card--inverse{background:var(--savva-night-camp);border-color:var(--border-on-inverse);color:var(--savva-canvas-ivory)}
.savva-card--interactive{cursor:pointer}
.savva-card--interactive:hover{border-color:var(--border-accent)}
.savva-card__media{position:relative;display:block;width:100%;background:var(--savva-night-camp-10)}
.savva-card__media img{display:block;width:100%;height:100%;object-fit:cover}
.savva-card__body{padding:var(--space-6)}
.savva-card__footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--border-quiet);display:flex;align-items:center;gap:var(--space-3)}

/* ---------- Badge ---------- */
.savva-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:var(--size-micro);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;padding:5px 10px;border-radius:var(--radius-sm);border:1px solid transparent}
.savva-badge__dot{width:5px;height:5px;border-radius:var(--radius-pill);background:currentColor;flex:none}
.savva-badge--neutral{background:var(--savva-night-camp-10);color:var(--savva-night-camp-90)}
.savva-badge--accent{background:var(--surface-accent-quiet);color:var(--text-accent)}
.savva-badge--onTrack{background:var(--status-on-track-quiet);color:var(--status-on-track)}
.savva-badge--attention{background:var(--status-attention-quiet);color:var(--status-attention)}
.savva-badge--delayed{background:var(--status-delayed-quiet);color:var(--status-delayed)}
.savva-badge--inverse{background:rgba(244,239,230,0.12);color:var(--savva-canvas-ivory);border-color:rgba(244,239,230,0.2)}

/* ---------- Tag ---------- */
.savva-tag{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-sans);font-size:var(--size-caption);font-weight:var(--weight-medium);letter-spacing:0.04em;padding:6px 12px;border-radius:var(--radius-sm);border:1px solid var(--border-default);background:transparent;color:var(--text-body)}
.savva-tag--filled{background:var(--surface-sunken);border-color:transparent}
.savva-tag--selected{background:var(--savva-night-camp);border-color:var(--savva-night-camp);color:var(--savva-canvas-ivory)}
.savva-tag--clickable{cursor:pointer;transition:var(--transition-tone)}
.savva-tag--clickable:hover{border-color:var(--border-strong)}
.savva-tag__remove{display:inline-flex;background:none;border:none;padding:0;margin-left:2px;color:inherit;cursor:pointer;opacity:.6}
.savva-tag__remove:hover{opacity:1}

/* ---------- Field shell (Input, Select, Textarea) ---------- */
.savva-field{display:flex;flex-direction:column;gap:6px}
.savva-field__label{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.savva-field__hint{font-size:var(--size-caption);color:var(--text-quiet)}
.savva-field__error{font-size:var(--size-caption);color:var(--status-delayed)}
.savva-input,.savva-select,.savva-textarea{font-family:var(--font-sans);font-size:var(--size-body-sm);font-weight:var(--weight-medium);color:var(--text-body);background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-xs);padding:12px 14px;width:100%;transition:var(--transition-tone)}
.savva-textarea{min-height:112px;resize:vertical;line-height:var(--leading-body)}
.savva-input::placeholder,.savva-textarea::placeholder{color:var(--text-quiet)}
.savva-input:hover,.savva-select:hover,.savva-textarea:hover{border-color:var(--savva-night-camp-40)}
.savva-input:focus,.savva-select:focus,.savva-textarea:focus{outline:none;border-color:var(--savva-kalahari-gold);box-shadow:var(--focus-ring)}
.savva-input[aria-invalid="true"],.savva-textarea[aria-invalid="true"]{border-color:var(--status-delayed)}
.savva-input[disabled],.savva-select[disabled],.savva-textarea[disabled]{background:var(--interactive-disabled-surface);color:var(--interactive-disabled-text);cursor:not-allowed}
.savva-input-wrap{position:relative;display:flex;align-items:center}
.savva-input-wrap .savva-icon{position:absolute;left:13px;color:var(--text-quiet);pointer-events:none}
.savva-input-wrap--icon .savva-input{padding-left:40px}
.savva-select-wrap{position:relative;display:flex;align-items:center}
.savva-select{appearance:none;padding-right:38px;cursor:pointer}
.savva-select-wrap__chevron{position:absolute;right:13px;pointer-events:none;color:var(--text-muted)}

/* ---------- Checkbox / Radio ---------- */
.savva-check{display:inline-flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;font-size:var(--size-body-sm);color:var(--text-body)}
.savva-check input{position:absolute;opacity:0;width:0;height:0}
.savva-check__box{flex:none;width:18px;height:18px;margin-top:1px;border:1px solid var(--border-default);border-radius:var(--radius-xs);background:var(--surface-raised);display:flex;align-items:center;justify-content:center;transition:var(--transition-tone)}
.savva-check:hover .savva-check__box{border-color:var(--savva-night-camp)}
.savva-check input:checked+.savva-check__box{background:var(--savva-night-camp);border-color:var(--savva-night-camp)}
.savva-check input:focus-visible+.savva-check__box{box-shadow:var(--focus-ring)}
.savva-check__tick{width:11px;height:11px;color:var(--savva-canvas-ivory);opacity:0;transition:opacity var(--duration-fast) var(--ease-standard)}
.savva-check input:checked+.savva-check__box .savva-check__tick{opacity:1}
.savva-check--disabled{cursor:not-allowed;color:var(--interactive-disabled-text)}
.savva-radio__box{border-radius:var(--radius-pill)}
.savva-radio__dot{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--savva-canvas-ivory);transform:scale(0);transition:transform var(--duration-fast) var(--ease-standard)}
.savva-check input:checked+.savva-radio__box .savva-radio__dot{transform:scale(1)}
.savva-check__text{display:flex;flex-direction:column;gap:2px}
.savva-check__desc{font-size:var(--size-caption);color:var(--text-quiet)}

/* ---------- Switch ---------- */
.savva-switch{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer;font-size:var(--size-body-sm)}
.savva-switch input{position:absolute;opacity:0;width:0;height:0}
.savva-switch__track{position:relative;flex:none;width:42px;height:22px;border-radius:var(--radius-pill);background:var(--savva-night-camp-30);transition:background-color var(--duration-fast) var(--ease-standard)}
.savva-switch__knob{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:var(--radius-pill);background:var(--savva-canvas-ivory);transition:transform var(--duration-base) var(--ease-standard)}
.savva-switch input:checked+.savva-switch__track{background:var(--savva-night-camp)}
.savva-switch input:checked+.savva-switch__track .savva-switch__knob{transform:translateX(20px)}
.savva-switch input:focus-visible+.savva-switch__track{box-shadow:var(--focus-ring)}
.savva-switch--disabled{cursor:not-allowed;color:var(--interactive-disabled-text)}

/* ---------- Tabs ---------- */
.savva-tabs{display:flex;gap:var(--space-8);border-bottom:1px solid var(--border-default)}
.savva-tab{position:relative;background:none;border:none;padding:0 0 14px;font-family:var(--font-sans);font-size:var(--size-label);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-quiet);cursor:pointer;transition:var(--transition-tone)}
.savva-tab:hover{color:var(--text-body)}
.savva-tab[aria-selected="true"]{color:var(--text-body)}
.savva-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--savva-kalahari-gold)}
.savva-tabs--pills{gap:var(--space-1);border-bottom:none}
.savva-tabs--pills .savva-tab{padding:9px 16px;border-radius:var(--radius-xs)}
.savva-tabs--pills .savva-tab[aria-selected="true"]{background:var(--savva-night-camp);color:var(--savva-canvas-ivory)}
.savva-tabs--pills .savva-tab[aria-selected="true"]::after{display:none}

/* ---------- Dialog ---------- */
.savva-dialog__scrim{position:fixed;inset:0;background:rgba(43,46,36,0.62);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:var(--space-6);z-index:60;animation:savva-fade var(--duration-base) var(--ease-standard)}
.savva-dialog{background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-overlay);width:100%;max-width:520px;overflow:hidden;animation:savva-rise var(--duration-slow) var(--ease-out-soft)}
.savva-dialog__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-6) var(--space-6) var(--space-4)}
.savva-dialog__body{padding:0 var(--space-6) var(--space-6);color:var(--text-muted);font-size:var(--size-body-sm);line-height:var(--leading-body)}
.savva-dialog__footer{display:flex;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-top:1px solid var(--border-quiet);background:var(--surface-sunken)}
@keyframes savva-fade{from{opacity:0}to{opacity:1}}
@keyframes savva-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Toast ---------- */
.savva-toast{display:flex;align-items:flex-start;gap:var(--space-3);background:var(--savva-night-camp);color:var(--savva-canvas-ivory);border-radius:var(--radius-md);box-shadow:var(--shadow-overlay);padding:var(--space-4) var(--space-5);min-width:300px;max-width:420px;animation:savva-rise var(--duration-slow) var(--ease-out-soft)}
.savva-toast__rail{width:2px;align-self:stretch;border-radius:var(--radius-pill);background:var(--savva-kalahari-gold);flex:none}
.savva-toast--onTrack .savva-toast__rail{background:var(--status-on-track)}
.savva-toast--attention .savva-toast__rail{background:var(--status-attention)}
.savva-toast--delayed .savva-toast__rail{background:var(--status-delayed)}
.savva-toast__title{font-size:var(--size-body-sm);font-weight:var(--weight-semibold)}
.savva-toast__msg{font-size:var(--size-caption);color:var(--text-on-inverse-muted);margin-top:2px}

/* ---------- Tooltip ---------- */
.savva-tooltip-wrap{position:relative;display:inline-flex}
.savva-tooltip{position:absolute;z-index:70;background:var(--savva-night-camp);color:var(--savva-canvas-ivory);font-size:var(--size-micro);font-weight:var(--weight-medium);letter-spacing:0.04em;padding:7px 10px;border-radius:var(--radius-xs);white-space:nowrap;pointer-events:none;animation:savva-fade var(--duration-fast) var(--ease-standard)}
.savva-tooltip--top{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.savva-tooltip--bottom{top:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.savva-tooltip--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}
.savva-tooltip--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}