/* Sayla primitives as plain CSS classes. Every value reads a token from
   tokens.css, so the classes switch with data-theme (paper, authority,
   grounding) exactly like the library's context-* surfaces. Class names map
   one to one to the library's props: .s-btn--featured-outline is
   <Button variant="featured-outline">. */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1&icon_names=account_circle,add,alternate_email,arrow_back,arrow_forward,arrow_outward,article,auto_awesome,ballot,bolt,bug_report,calendar_today,call_to_action,castle,category,check,check_circle,chevron_right,close,content_copy,crop_portrait,dashboard,data_object,description,diamond,download,drive_file_rename_outline,error,expand_more,explore,favorite,favorite_border,filter_alt,fit_screen,format_list_bulleted,fullscreen,fullscreen_exit,graphic_eq,grid_view,handyman,help_outline,history,home,identity_platform,info,input,integration_instructions,inventory_2,label,language,laptop_mac,layers,lock,lock_open,logout,mail,map,mark_chat_unread,menu,menu_book,menu_open,military_tech,notifications,open_in_new,pause,person,person_add,phone_iphone,photo_camera,play_arrow,play_circle,podcasts,preview,psychology,push_pin,radio_button_unchecked,receipt_long,refresh,rocket_launch,schedule,school,search,search_off,shopping_cart,smart_button,smart_toy,star,stars,sticky_note_2,sync,tablet_mac,thumb_up,tips_and_updates,tune,update,video_call,view_list,visibility,visibility_off,warning,web,web_asset,widgets,work,workspace_premium&display=block');

/* ---------- Surface ---------- */
.s-surface { background: var(--color-surface); color: var(--color-on-surface); font-family: var(--font-body); }

/* ---------- Icon ---------- */
.s-icon {
  font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal;
  font-size: 1.125rem; line-height: 1; letter-spacing: normal; text-transform: none;
  white-space: nowrap; display: inline-block; vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0;
}
.s-icon--filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0; }
.s-icon--sm { font-size: 1rem; } .s-icon--md { font-size: 1.125rem; }
.s-icon--lg { font-size: 1.5rem; } .s-icon--xl { font-size: 2.25rem; }
.s-icon--inline { font-size: 1.05em; }
.s-icon--gold { color: var(--color-surface-eyebrow); }
.s-icon--authority { color: var(--color-heading-authority); }
.s-icon--accent { color: var(--color-theme-accent); }
.s-icon--muted { opacity: 0.6; }
.s-icon--success { color: var(--color-surface-success); } .s-icon--info { color: var(--color-surface-info); }
.s-icon--warning { color: var(--color-surface-warning); } .s-icon--error { color: var(--color-surface-error); }

/* ---------- Button ---------- */
.s-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 600; letter-spacing: -0.025em; line-height: 1;
  height: 2.5rem; padding: 0 1.25rem; font-size: 0.875rem; border-radius: var(--radius-theme-button);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color 150ms, color 150ms, border-color 150ms;
}
.s-btn--xs { height: 2rem; padding: 0 1rem; border-radius: var(--radius-md); }
.s-btn--sm { height: 2.25rem; padding: 0 1rem; border-radius: var(--radius-lg); }
.s-btn--lg { height: 2.75rem; padding: 0 1.25rem; font-size: 1rem; }
.s-btn--xl { height: 3rem; padding: 0 1.5rem; font-size: 1rem; }
.s-btn--3xl { height: 3.5rem; padding: 0 2rem; font-size: 1.125rem; }
.s-btn--full { border-radius: var(--radius-full); }
.s-btn--authority { background: var(--color-surface-cta); color: var(--color-surface-on-cta); box-shadow: var(--shadow-theme-soft); }
.s-btn--authority:hover { background: var(--color-surface-cta-hover); }
.s-btn--outline { background: transparent; border-color: var(--color-surface-cta); color: var(--color-surface-cta); }
.s-btn--outline:hover { background: var(--color-surface-cta); color: var(--color-surface-on-cta); }
.s-btn--plain { background: var(--color-surface-plain); color: var(--color-surface-on-plain); }
.s-btn--plain:hover { background: var(--color-surface-plain-hover); }
.s-btn--plain-outline { background: transparent; border-color: var(--color-on-surface); color: var(--color-on-surface); }
.s-btn--plain-outline:hover { background: var(--color-surface-plain); border-color: var(--color-surface-plain); color: var(--color-surface-on-plain); }
.s-btn--featured { background: var(--color-surface-featured); color: var(--color-surface-on-featured); }
.s-btn--featured:hover { background: var(--color-surface-featured-hover); }
.s-btn--featured-outline { background: transparent; border-color: var(--color-surface-featured-line); color: var(--color-surface-featured-line); }
.s-btn--featured-outline:hover { background: var(--color-surface-featured); border-color: var(--color-surface-featured); color: var(--color-surface-on-featured); }
.s-btn--accent { background: var(--color-theme-accent); border-color: var(--color-theme-accent); color: var(--color-theme-grounding); }
.s-btn--accent:hover { background: var(--color-accent-bright); border-color: var(--color-accent-bright); }
.s-btn--neutral { background: var(--color-surface-field); border-color: var(--color-surface-line); color: var(--color-on-surface-muted); }
.s-btn--neutral:hover { border-color: var(--color-on-surface); color: var(--color-on-surface); }
.s-btn--text { height: auto; padding: 0; border: 0; background: none; color: var(--color-surface-eyebrow); text-underline-offset: 4px; }
.s-btn--text:hover { color: var(--color-on-surface); text-decoration: underline; }
.s-btn[aria-busy='true'] { cursor: progress; opacity: 0.8; }
.s-btn--success { background: var(--color-surface-success); border-color: transparent; color: var(--color-surface-on-cta); cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .s-btn--success { animation: s-status-glow 1.2s ease-out 1; }
}
@keyframes s-status-glow {
  0% { box-shadow: 0 0 0 0 var(--color-surface-success-line); }
  40% { box-shadow: 0 0 0 6px var(--color-surface-success-line); }
  100% { box-shadow: 0 0 0 12px transparent; }
}
.s-btn:focus-visible { outline: 2px solid var(--color-surface-eyebrow); outline-offset: 2px; }

/* ---------- Eyebrow ---------- */
.s-eyebrow {
  font-family: var(--font-body); font-size: 0.875rem; font-weight: var(--font-weight-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; line-height: 1.5;
  color: var(--color-surface-eyebrow); margin: 0;
}
.s-eyebrow--secondary { color: var(--color-on-surface-muted); }
.s-eyebrow--grounded { color: var(--color-on-surface); }
.s-eyebrow--overline { display: flex; align-items: center; gap: 0.75rem; }
.s-eyebrow--overline::before { content: ''; height: 1px; width: 2rem; flex-shrink: 0; background: currentColor; }
.s-eyebrow--pill {
  display: inline-flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-full);
  border: 1px solid color-mix(in oklch, var(--color-theme-accent) 30%, transparent);
  background: var(--color-theme-accent-soft); padding: 0.25rem 0.75rem; color: var(--color-theme-gold-text);
}

/* ---------- Badge ---------- */
.s-badge {
  display: inline-flex; align-items: center; gap: 0.25rem; border: 1px solid transparent;
  font-family: var(--font-body); font-weight: 500; font-size: 0.875rem; line-height: 1.25rem;
  padding: 0.125rem 0.5rem; border-radius: var(--radius-md);
}
.s-badge--md { gap: 0.375rem; padding: 0.25rem 0.75rem; }
.s-badge--pill { border-radius: var(--radius-full); }
.s-badge--muted { background: var(--color-surface-muted); color: var(--color-on-surface-muted); }
.s-badge--accent { background: var(--color-theme-accent); color: var(--color-theme-grounding); }
.s-badge--gold { border-color: var(--color-surface-featured-line); color: var(--color-surface-featured-line); }
.s-badge--outline { border-color: color-mix(in oklch, var(--color-on-surface-muted) 50%, transparent); color: var(--color-on-surface); }
.s-badge--outline .s-icon { color: var(--color-surface-eyebrow); }
.s-badge--success { border-color: var(--color-surface-success-line); background: var(--color-surface-success-soft); color: var(--color-surface-success); }
.s-badge--info { border-color: var(--color-surface-info-line); background: var(--color-surface-info-soft); color: var(--color-surface-info); }
.s-badge--warning { border-color: var(--color-surface-warning-line); background: var(--color-surface-warning-soft); color: var(--color-surface-warning); }
.s-badge--error { border-color: var(--color-surface-error-line); background: var(--color-surface-error-soft); color: var(--color-surface-error); }

/* ---------- Emphasis (gold tone) ---------- */
.s-emph { background: transparent; color: inherit; font-style: normal; font-weight: 400; }
.s-emph--tint { font-weight: 600; background: var(--color-emphasis-tint); color: var(--color-on-emphasis-tint); border-radius: var(--radius-md); padding: 1px 0.25rem; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.s-emph--marker { padding: 0 0.125rem; background-image: linear-gradient(transparent 40%, var(--color-emphasis-marker) 40%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.s-emph--underline { font-weight: 600; text-decoration: underline dashed var(--color-emphasis-line) 2px; text-underline-offset: 4px; }
.s-emph--wavy { text-decoration: underline wavy var(--color-emphasis-line) 1.5px; text-underline-offset: 3px; }
.s-emph--serif { font-family: var(--font-display); font-style: italic; color: var(--color-emphasis-text); }
.s-emph--strike { color: var(--color-on-surface-muted); text-decoration: line-through var(--color-emphasis-line) 2px; }

/* ---------- Fields ---------- */
.s-field { display: flex; flex-direction: column; gap: 0.5rem; }
.s-label { font-family: var(--font-heading); font-weight: 700; font-size: 0.875rem; line-height: 1.375; color: var(--color-on-surface); }
.s-label small { font-weight: 400; color: var(--color-on-surface-muted); font-size: 0.875rem; }
.s-input {
  width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 1rem;
  padding: 0.625rem 1.25rem; border-radius: var(--radius-theme-button);
  border: 1px solid var(--color-surface-line); background: var(--color-surface-field); color: var(--color-on-surface);
}
.s-input::placeholder { color: var(--color-on-surface-muted); }
.s-input:focus { outline: none; box-shadow: 0 0 0 2px var(--color-surface-eyebrow); }
.s-input--sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
.s-input--lg { padding: 0.875rem 1.25rem; }
.s-input--underline { border: 0; border-bottom: 1px solid color-mix(in oklch, var(--color-on-surface) 45%, transparent); border-radius: 0; background: transparent; padding: 0.5rem 0 0.75rem; }
.s-input[aria-invalid='true'] { border-color: var(--color-surface-error); }
.s-input[aria-invalid='true']:focus { box-shadow: 0 0 0 2px var(--color-surface-error); }
.s-msg { display: flex; align-items: flex-start; gap: 0.375rem; font-family: var(--font-body); font-size: 0.875rem; line-height: 1.5; color: var(--color-on-surface-muted); margin: 0; }
.s-msg--error { color: var(--color-surface-error); }
.s-msg--success { color: var(--color-surface-success); }
.s-msg .s-icon { font-size: 1rem; line-height: 1.3125rem; }

/* ---------- Alert ---------- */
.s-alert { display: flex; align-items: flex-start; gap: 0.75rem; border: 1px solid; border-radius: var(--radius-theme-card); padding: 0.75rem 1rem; }
.s-alert--success { border-color: var(--color-surface-success-line); background: var(--color-surface-success-soft); }
.s-alert--info { border-color: var(--color-surface-info-line); background: var(--color-surface-info-soft); }
.s-alert--warning { border-color: var(--color-surface-warning-line); background: var(--color-surface-warning-soft); }
.s-alert--error { border-color: var(--color-surface-error-line); background: var(--color-surface-error-soft); }
.s-alert__title { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 1rem; line-height: 1.375; color: var(--color-on-surface); }
.s-alert__body { margin: 0.125rem 0 0; font-family: var(--font-body); font-size: 0.875rem; line-height: 1.5; color: var(--color-on-surface-muted); }
.s-alert > .s-icon { line-height: 1.375rem; }

/* ---------- Card ---------- */
.s-card { border-radius: var(--radius-theme-card); padding: 2rem; background: var(--color-surface); color: var(--color-on-surface); box-sizing: border-box; }
.s-card--editorial { box-shadow: var(--shadow-theme-soft); }
.s-card--raised { background: var(--color-surface-raised); border: 1px solid var(--color-surface-line); }
.s-card--resource { background: var(--color-theme-surface-subtle); box-shadow: var(--shadow-theme-soft); }
.s-card--support { background: var(--color-theme-surface-tonal); box-shadow: var(--shadow-theme-soft); }
.s-card--editorial-dark { box-shadow: var(--shadow-theme-glow); }
.s-card--grounded { box-shadow: var(--shadow-theme-deep); }
.s-card--featured-outline { border: 2px solid var(--color-surface-featured-line); box-shadow: var(--shadow-theme-soft); }
/* Color-led light contexts (library context-accent / context-featured): paper
   roles on a warm fill, with the roles that would miss AA re-pointed. */
.s-card--accent, .s-card--featured {
  --color-surface-line: color-mix(in oklch, var(--color-theme-grounding) 20%, transparent);
  --color-surface-accent-display: var(--color-accent-dark);
  --color-surface-featured-line: var(--color-secondary-dark);
  --color-surface-success: var(--color-theme-success-deep);
  --color-surface-info: var(--color-theme-info-deep);
  --color-surface-warning: var(--color-theme-warning-deep);
  --color-surface-error: var(--color-theme-error-deep);
  --color-emphasis-line: var(--color-secondary-dark);
  --color-emphasis-tint: color-mix(in oklch, var(--color-background) 60%, transparent);
}
.s-card--accent { --color-surface: var(--color-theme-accent); --color-surface-eyebrow: var(--color-accent-dark); box-shadow: var(--shadow-theme-soft); }
.s-card--featured { --color-surface: var(--color-secondary-bright); --color-surface-eyebrow: var(--color-secondary-dark); box-shadow: var(--shadow-theme-deep); }
.s-card--media { padding: 0; overflow: hidden; }

/* ---------- Text helpers (type styles from tokens.css, colored by job) ---------- */
.s-tone-authority { color: var(--color-heading-authority); }
.s-tone-grounded { color: var(--color-on-surface); }
.s-tone-secondary { color: var(--color-on-surface-muted); }
.s-tone-gold { color: var(--color-surface-eyebrow); }
.s-tone-accent { color: var(--color-surface-accent-display); }
.s-balance { text-wrap: balance; } .s-pretty { text-wrap: pretty; }