/*
 * Mise design tokens and base styles.
 * Component and page styles live in the other files in this folder; the
 * layer order below makes the cascade independent of file load order.
 */
@layer reset, base, layout, components, pages, utilities;

:root {
  --bg: #F6F1E8;
  --surface: #FFFDF8;
  --sunken: #EFE8DC;
  --hover: #E6DDCF;
  --press: #F1EADF;
  --line: #EFE8DC;
  --border: #E6DDCF;
  --border-strong: #DDD2C1;
  --rule: #E2D8C8;
  --dashed: #B9AD9C;

  --ink: #231E19;
  --ink-2: #3A332C;
  --ink-3: #4A413A;
  --muted: #6A5F55;
  --faint: #8C8076;

  --accent: #B7441E;
  --accent-hover: #9E3915;
  --accent-ink: #8F3314;
  --accent-soft: #F6E3D8;

  --green: #3E5B3A;
  --green-soft: #E3EBDD;
  --green-ink: #2F4A2B;
  --amber-soft: #F3E4C4;
  --amber-ink: #6B4A12;
  --warn-soft: #FBEFD0;
  --warn-border: #E8C877;
  --del-soft: #F7DCD2;
  --del-ink: #7A2A10;
  --ins-soft: #DDE8D5;
  --ins-ink: #1F3A1C;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-sm: 10px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(35, 30, 25, .08);
  --shadow: 0 8px 24px rgba(35, 30, 25, .10);

  --sidebar-width: 248px;
  --gutter: 40px;

  color-scheme: light;
}

/* Custom properties set inside a layer lose to these unlayered ones, so the phone gutter lives here. */
@media (max-width: 900px) {
  :root { --gutter: 16px; }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  [hidden] { display: none !important; }
}

@layer base {
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  }

  a { color: var(--accent); }
  a:hover { color: var(--accent-ink); }

  :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  .serif { font-family: var(--serif); }

  .icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }
  .icon--sm { width: 16px; height: 16px; }
  .icon--xs { width: 14px; height: 14px; }
  .icon--lg { width: 24px; height: 24px; }
  .icon--filled { fill: currentColor; }

  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@layer utilities {
  /*
   * iPhone Safari zooms in on any text box under 16px when it's tapped, and stays zoomed
   * after the keyboard closes, leaving the page panned and the tab bar off to one side.
   */
  @media (pointer: coarse) {
    .new-collection input, .tag-input, .select, .input--sm, .extras__add .input,
    .admin-triage .select, .admin-triage .textarea { font-size: 16px; }
  }

  .muted { color: var(--muted); }
  .stack { display: flex; flex-direction: column; gap: var(--stack-gap, 16px); }
  .row { display: flex; align-items: center; gap: var(--row-gap, 10px); flex-wrap: wrap; }
  .push-right { margin-left: auto; }
  .grow { flex-grow: 1; min-width: 0; }
  .nowrap { white-space: nowrap; }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media screen { .print-only { display: none !important; } }
}