/* Tack design tokens: the type and spacing scale shared by every page in web-app/.
   Load this before the page's own styles. It only defines custom properties on :root,
   so linking it changes nothing until a rule uses a token, apart from the shared .back-link at
   the end. (TAC-19) */
:root {
  /* ---- Type scale (desktop, 14-inch at 100 %) ----
     Headings keep their own clamp() sizes in Cormorant Garamond. */
  --text-12: 12px;   /* floor for tracked uppercase eyebrows, labels, badges */
  --text-13: 13px;   /* trust rows, fine print */
  --text-14: 14px;   /* secondary text, buttons, pills, nav links, meta lines */
  --text-15: 15px;   /* card body on the paper touchpoints */
  --text-16: 16px;   /* body copy and inputs */
  --text-18: 18px;   /* ledes */

  /* Roles, so a page reads as intent instead of a number. */
  --text-eyebrow: var(--text-14);
  --text-label:   var(--text-12);
  --text-badge:   var(--text-12);
  --text-footer:  var(--text-14);
  --text-ui:      var(--text-14);   /* buttons, pills, links in chrome */
  --text-meta:    var(--text-14);   /* captions, periods, helper lines */
  --text-subtitle: var(--text-16); /* the line under a page or section title */
  --text-body:    var(--text-16);
  --text-input:   var(--text-16);
  --text-lede:    var(--text-18);
  --text-title:   clamp(44px, 6vw, 80px);   /* page title on every page (80px at ≥1334px) */
  --text-app-title: clamp(36px, 4.5vw, 60px);   /* title on app screens: Library, editor (60px at ≥1334px, 46px at 1024, 36px on phones) */
  --title-gap:    var(--space-3);           /* title → subtitle */

  --tracking-eyebrow: 0.12em;        /* uppercase labels keep their letter-spacing at 12px */

  /* ---- Spacing scale: 4px steps, token number = multiple of 4 ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Controls: pills, buttons, menu rows ---- */
  --control-height: 42px;
  --control-pad-y:  10px;
  --control-pad-x:  20px;
  --control-radius: 999px;

  /* ---- Shared chrome geometry (used by the header ticket) ---- */
  --nav-height: 68px;
  --nav-gutter: 40px;
  --logo-height: 28px;
}

/* Form controls on the dark shell: browser autofill must not paint the light default. */
:root { color-scheme: dark; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1a1814 inset;
  box-shadow: 0 0 0 1000px #1a1814 inset;
  -webkit-text-fill-color: #f0ebe3;
  caret-color: #f0ebe3;
  transition: background-color 9999s ease-out 0s;
}

/* Back link: the one "go back" control, top-left directly above the page or card title.
   Markup: <a class="back-link" href="..."><span aria-hidden="true">←</span> Label</a>
   (or a <button type="button">). Fallbacks cover pages that do not define the ink tokens. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin: 0 0 var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-ui);
  letter-spacing: 0;
  text-decoration: none;
  color: var(--ink-muted, #8a8070);
  cursor: pointer;
  transition: color 0.2s;
}
@media (hover: hover) { .back-link:hover { color: var(--ink, #f0ebe3); } }
.back-link:focus-visible { outline: 2px solid var(--accent-light, #8FBEF7); outline-offset: 3px; }