/* Undertones design tokens, v0.1 (September 10, 2026)
   Single source of truth for color, type, space, and shape.
   Anything marked PLACEHOLDER or WORKING is expected to change; keep it behind the token so the swap is one line. */

:root {
  /* The Salon: constant across every surface */
  --ut-paper: #FFFFFF;        /* page background */
  --ut-ivory: #F2E9D8;        /* panels, cards, the fitting card surface */
  --ut-walnut: #4B2E22;       /* deep surfaces: footers, dark sections, error borders */
  --ut-brass: #B48A4A;        /* decorative only: rules, small marks. Never text under 24px. */
  --ut-mirror: #D9D6CF;       /* dividers, disabled states, image placeholders */
  --ut-ink: #000000;          /* text, wordmark, primary buttons */
  --ut-quiet: #555555;        /* secondary text on paper and ivory */
  /* Reaction marks on the Edit: a starred piece's star fills yellow, a liked
     piece's thumb fills gray. WORKING; an exception to "no fills", by request (October 5, 2026). */
  --ut-starred: #E8B820;
  --ut-liked: #A6A6A6;

  /* The four rooms: WORKING values, pending Shelby's confirmation.
     Appears once per surface, on the plate. Never a background, never a wash, never on the wordmark. */
  --ut-room-spring: #EFE3C8;  /* Ivory, warm and light */
  --ut-room-summer: #465268;  /* Slate, cool and light */
  --ut-room-autumn: #5C3A21;  /* Tobacco, warm and deep */
  --ut-room-winter: #000000;  /* Ink, cool and deep */
  --ut-room: var(--ut-ink);   /* set per user at runtime: --ut-room: var(--ut-room-autumn) */

  /* Type. WORKING secondary: Libre Franklin (OFL). The wordmark is an SVG asset, never typed. */
  --ut-font: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ut-font-email: Helvetica, Arial, sans-serif;   /* email clients strip web fonts */
  --ut-weight-display: 300;
  --ut-weight-text: 400;
  --ut-weight-label: 500;
  --ut-weight-button: 600;

  --ut-text-sm: 0.875rem;   /* 14px: plates, captions, disclosure, size notes */
  --ut-text-md: 1rem;       /* 16px: body */
  --ut-text-lg: 1.125rem;   /* 18px: lead body, Shelby's note */
  --ut-text-xl: 1.375rem;   /* 22px: section heads */
  --ut-text-2xl: 1.75rem;   /* 28px: page heads */
  --ut-text-3xl: 2.25rem;   /* 36px: hero */
  --ut-text-4xl: 3rem;      /* 48px: hero, large screens */

  --ut-leading-text: 1.5;
  --ut-leading-display: 1.15;
  --ut-tracking-display: -0.01em;
  --ut-tracking-label: 0.02em;

  /* Space: 4px base */
  --ut-space-1: 0.25rem;
  --ut-space-2: 0.5rem;
  --ut-space-3: 0.75rem;
  --ut-space-4: 1rem;
  --ut-space-6: 1.5rem;
  --ut-space-8: 2rem;
  --ut-space-12: 3rem;
  --ut-space-16: 4rem;
  --ut-space-24: 6rem;

  /* Shape: the Salon is square. Radius is zero everywhere except pins and avatars. */
  --ut-radius: 0;
  --ut-radius-round: 999px;
  --ut-border: 1px solid var(--ut-ink);
  --ut-border-soft: 1px solid var(--ut-mirror);
  --ut-shadow: none;

  /* Motion */
  --ut-ease: cubic-bezier(0.2, 0, 0, 1);
  --ut-duration: 180ms;

  /* Layout */
  --ut-measure: 66ch;
  --ut-page-max: 1080px;
  --ut-email-max: 600px;
  --ut-tap-min: 44px;

  /* Focus: always ink, never brass (brass fails 3:1 on ivory) */
  --ut-focus: 2px solid var(--ut-ink);
  --ut-focus-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ut-duration: 0ms; }
}

/* Base */
html { font-size: 100%; }
body {
  margin: 0;
  background: var(--ut-paper);
  color: var(--ut-ink);
  font-family: var(--ut-font);
  font-weight: var(--ut-weight-text);
  font-size: var(--ut-text-md);
  line-height: var(--ut-leading-text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-weight: var(--ut-weight-display);
  line-height: var(--ut-leading-display);
  letter-spacing: var(--ut-tracking-display);
  margin: 0;
}
h1 { font-size: var(--ut-text-3xl); }
h2 { font-size: var(--ut-text-2xl); }
h3 { font-size: var(--ut-text-xl); }
@media (min-width: 900px) { h1 { font-size: var(--ut-text-4xl); } }
p { margin: 0 0 var(--ut-space-4); max-width: var(--ut-measure); }
a { color: var(--ut-ink); text-decoration: underline; text-underline-offset: 0.15em; }
:focus-visible { outline: var(--ut-focus); outline-offset: var(--ut-focus-offset); }
.ut-price, .ut-tabular { font-variant-numeric: tabular-nums; }

/* Components */

/* The wordmark: an image, always. Height sets the size; width follows. */
.ut-wordmark { display: block; height: 40px; width: auto; }
.ut-wordmark--sm { height: 28px; }
.ut-wordmark--lg { height: 64px; }

/* The plate: the one place the room color appears on a surface */
.ut-plate {
  display: inline-flex; align-items: center; gap: var(--ut-space-2);
  font-size: var(--ut-text-sm); font-weight: var(--ut-weight-label);
  letter-spacing: var(--ut-tracking-label); color: var(--ut-ink);
}
.ut-plate::before {
  content: ""; width: 12px; height: 12px; flex: none;
  background: var(--ut-room); border: var(--ut-border);
}

/* Panels */
.ut-panel { background: var(--ut-ivory); padding: var(--ut-space-6); border-radius: var(--ut-radius); }
.ut-panel--walnut { background: var(--ut-walnut); color: var(--ut-ivory); }
.ut-panel--walnut a { color: var(--ut-ivory); }

/* Buttons */
.ut-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--ut-tap-min); padding: 0 var(--ut-space-6);
  background: var(--ut-ink); color: var(--ut-paper);
  font: inherit; font-weight: var(--ut-weight-button); font-size: var(--ut-text-md);
  border: var(--ut-border); border-radius: var(--ut-radius); cursor: pointer;
  text-decoration: none; transition: background var(--ut-duration) var(--ut-ease), color var(--ut-duration) var(--ut-ease);
}
.ut-button:hover { background: var(--ut-walnut); border-color: var(--ut-walnut); }
.ut-button--secondary { background: transparent; color: var(--ut-ink); }
.ut-button--secondary:hover { background: var(--ut-ivory); border-color: var(--ut-ink); }
.ut-button[disabled], .ut-button[aria-disabled="true"] { background: var(--ut-mirror); border-color: var(--ut-mirror); color: var(--ut-quiet); cursor: not-allowed; }

/* Forms */
.ut-field { display: grid; gap: var(--ut-space-2); margin-bottom: var(--ut-space-6); }
.ut-label { font-size: var(--ut-text-sm); font-weight: var(--ut-weight-label); letter-spacing: var(--ut-tracking-label); }
.ut-input, .ut-select {
  min-height: var(--ut-tap-min); padding: 0 var(--ut-space-3);
  font: inherit; color: var(--ut-ink); background: var(--ut-paper);
  border: var(--ut-border); border-radius: var(--ut-radius);
}
.ut-input:focus-visible, .ut-select:focus-visible { outline: var(--ut-focus); outline-offset: 0; }
.ut-help { font-size: var(--ut-text-sm); color: var(--ut-quiet); }
.ut-field[data-invalid="true"] .ut-input { border: 2px solid var(--ut-walnut); }
.ut-error { font-size: var(--ut-text-sm); color: var(--ut-walnut); }

/* The Edit item */
.ut-item { display: grid; grid-template-columns: 96px 1fr; gap: var(--ut-space-4); padding: var(--ut-space-4) 0; border-top: var(--ut-border-soft); }
.ut-item__image { width: 96px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--ut-mirror); display: block; }
.ut-item__retailer { font-size: var(--ut-text-sm); color: var(--ut-quiet); }
.ut-item__name { font-size: var(--ut-text-md); }
.ut-item__price { font-size: var(--ut-text-md); font-variant-numeric: tabular-nums; }
.ut-item__size { font-size: var(--ut-text-sm); font-weight: var(--ut-weight-label); }
.ut-item__link { font-size: var(--ut-text-sm); }

/* Disclosure and consent lines */
.ut-fine { font-size: var(--ut-text-sm); color: var(--ut-quiet); max-width: var(--ut-measure); }

/* Dividers: prefer space; when a rule is needed, use mirror, not brass, not hairline black */
.ut-rule { border: 0; border-top: var(--ut-border-soft); margin: var(--ut-space-8) 0; }