/* Shared foundations for the jaredharder homepage, clothing and design library.
   Clueless intentionally keeps its own visual system. */
/* Use installed SF Mono faces; Apple font binaries are not redistributed. */
@font-face {
  font-family: "Rolu SF Mono";
  src: local("SFMono-Regular"), local("SF Mono Regular"), local("SF Mono");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Rolu SF Mono";
  src: local("SFMono-RegularItalic"), local("SF Mono Regular Italic");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: light;
  --ds-font: "Rolu SF Mono", "SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace;
  --ds-text: 12px;
  --ds-caption: 10px;
  --ds-nav: 12px;
  --ds-heading: 14px;
  --ds-size-display: var(--ds-heading);
  --ds-leading: 1.5;
  --ds-page: #f3f3f1;
  --ds-surface: #ffffff;
  --ds-ink: #30342d;
  --ds-muted: #747b6e;
  --ds-line: #daddd3;
  --ds-wash: #e8eae3;
  --ds-accent: #607044;
  --ds-space-1: 5px;
  --ds-space-2: 10px;
  --ds-space-3: 20px;
  --ds-gutter: 20px;
  --ds-header: 56px;
  --ds-control: 28px;
  --ds-icon-size: 14px;
  --ds-field-height: 40px;
  --ds-select-icon: url("assets/icons/select-chevron.svg");
  --ds-chip-height: 24px;
  --ds-chip-text: var(--ds-text);
  --ds-chip-leading: 14px;
  --ds-chip-padding-y: var(--ds-space-1);
  --ds-chip-padding-x: var(--ds-space-2);
  --ds-chip-gap: var(--ds-space-1);
  --ds-radius: 0;
  --ds-hover: #dce2d2;
  --ds-tag: #e9e9e6;
  --ds-tag-hover: #d8d8d4;
  --ds-overlay: #ffffffed;
  --ds-backdrop: #20251b40;
  --ds-on-ink: #ffffff;
  --ds-input: #f0f0ed;
  --ds-error: #a33131;
  --ds-selection: #dce3d2;
  --ds-motion: 140ms ease;
  font-family: var(--ds-font);
  font-size: var(--ds-text);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  color: var(--ds-ink);
  background: var(--ds-page);
}
html { scrollbar-gutter: stable; }
* { box-sizing: border-box; }
body { margin: 0; font: 400 var(--ds-text)/var(--ds-leading) var(--ds-font); color: var(--ds-ink); background: var(--ds-page); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, b, strong { font-weight: 400; }
a { color: inherit; }
:where(button, a, input, select, textarea):focus-visible { outline: 1px solid var(--ds-accent); outline-offset: 3px; }
::selection { color: var(--ds-ink); background: var(--ds-selection); }
.ds-label { font-size: var(--ds-caption); color: var(--ds-muted); }
.ds-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); min-height: var(--ds-control); padding: var(--ds-space-1) var(--ds-space-2); border: 0; border-radius: var(--ds-radius); background: var(--ds-wash); font: inherit; cursor: pointer; }
.ds-button:hover { background: var(--ds-hover); }
@media (max-width: 760px) { :root { --ds-header: 88px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.ds-chip { display:inline-flex; align-items:center; justify-content:center; min-height:var(--ds-chip-height); padding:var(--ds-chip-padding-y) var(--ds-chip-padding-x); gap:var(--ds-chip-gap); border:0; border-radius:var(--ds-radius); background:var(--ds-tag); color:var(--ds-ink); font:400 var(--ds-chip-text)/var(--ds-chip-leading) var(--ds-font); text-transform:uppercase; }
.ds-chip:is(button,a):hover { background:var(--ds-tag-hover); }
.ds-chip[aria-pressed=true] { background:var(--ds-ink); color:var(--ds-on-ink); }

/* Native select behaviour with consistent icon clearance on every screen. */
select:not([multiple]) {
  appearance:none;
  -webkit-appearance:none;
  display:block;
  width:100%;
  min-width:0;
  height:var(--ds-field-height);
  padding:var(--ds-space-2) 34px var(--ds-space-2) var(--ds-space-2);
  border:1px solid var(--ds-line);
  border-radius:var(--ds-radius);
  background-color:var(--ds-surface);
  background-image:var(--ds-select-icon);
  background-repeat:no-repeat;
  background-position:right var(--ds-space-2) center;
  background-size:14px 14px;
  font-size:var(--ds-text);
  line-height:var(--ds-leading);
  cursor:pointer;
}
select:disabled { opacity:.5; cursor:not-allowed; }
:where(button:disabled) { cursor:not-allowed; opacity:.5; }
:where(summary):focus-visible { outline:1px solid var(--ds-accent); outline-offset:3px; }
@media(forced-colors:active) {
  select:not([multiple]) { appearance:auto; -webkit-appearance:auto; background-image:none; padding-right:var(--ds-space-2); }
}