/* ============================================================
   Convenient Services — web design tokens
   Brand system v3 · light-led with dark punctuation
   Every contrast ratio below is measured, not estimated.
   ============================================================ */

:root {
  /* ---- surfaces ---------------------------------------- */
  --cs-bone:        #FAF9F7;  /* ground. warm, never pure white */
  --cs-obsidian:    #0A0A0B;  /* punctuation sections only */
  --cs-hairline:    #E8E8E6;  /* the only border color */
  --cs-hairline-dk: #262628;  /* hairline on obsidian */

  /* ---- text -------------------------------------------- */
  --cs-text:        #0A0A0B;  /* 18.81:1 on bone — AAA */
  --cs-text-2:      #6E6E73;  /* 4.82:1 on bone — AA at any size. USE THIS for secondary copy,
                                 labels on bone, and placeholders */
  /* 3.10:1 on bone. Previously marked "labels and large text only" — but WCAG
     large text starts at 24px (or 18.66px bold), and our labels are 12px, so
     that exemption never applied and every label on bone was failing AA.
     DECORATIVE MARKS ONLY — never text a reader has to read. */
  --cs-text-mute:   #8E8E93;
  --cs-text-invert: #FAF9F7;  /* 18.81:1 on obsidian */
  --cs-alert:       #B04834;  /* 5.22:1 on bone. was #C4543F at 4.26 — failed AA */

  /* ---- the one color ---------------------------------- */
  --cs-live:        #0A84FF;  /* 5.43:1 on obsidian. 3.47:1 on bone = LARGE ONLY */
  --cs-live-deep:   #0064D2;  /* 5.32:1 — button fills, and blue text on bone */

  /* ---- type -------------------------------------------- */
  --cs-display: "Superclarendon", "SuperClarendon", Georgia, serif;
  --cs-body:    "Seravek", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --cs-mono:    "Fira Code", "FiraCode Nerd Font", ui-monospace, Menlo, monospace;

  /* fluid scale — clamp(min, preferred, max) */
  --cs-t-display: clamp(2.75rem, 6vw,   5rem);
  --cs-t-h1:      clamp(2.25rem, 4.4vw, 3.5rem);
  --cs-t-h2:      clamp(1.75rem, 3vw,   2.5rem);
  --cs-t-h3:      1.25rem;
  --cs-t-lede:    clamp(1.125rem, 1.6vw, 1.375rem);
  --cs-t-body:    1rem;
  --cs-t-small:   0.875rem;
  --cs-t-label:   0.75rem;

  --cs-lh-tight: 1.02;
  --cs-lh-head:  1.1;
  --cs-lh-body:  1.65;

  --cs-tr-display: -0.03em;   /* negative tracking on display only */
  --cs-tr-head:    -0.022em;
  --cs-tr-body:    -0.004em;
  --cs-tr-label:    0.14em;   /* positive, uppercase */

  /* ---- space — 4px base -------------------------------- */
  --cs-1: 0.25rem;  --cs-2: 0.5rem;   --cs-3: 0.75rem;  --cs-4: 1rem;
  --cs-6: 1.5rem;   --cs-8: 2rem;     --cs-12: 3rem;    --cs-16: 4rem;
  --cs-24: 6rem;    --cs-32: 8rem;    --cs-48: 12rem;

  --cs-section-y: clamp(var(--cs-16), 12vw, var(--cs-32));
  --cs-gutter:    clamp(var(--cs-6), 5vw, var(--cs-12));

  /* ---- measure & layout -------------------------------- */
  --cs-max:     1200px;
  --cs-measure: 65ch;   /* never let body text exceed this */

  /* ---- motion ------------------------------------------ */
  --cs-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --cs-fast:     160ms;
  --cs-base:     220ms;
  --cs-reveal:   420ms;
}

/* ============================================================
   BASE
   ============================================================ */
html { -webkit-font-smoothing: antialiased; }
body {
  background: var(--cs-bone);
  color: var(--cs-text);
  font: 400 var(--cs-t-body)/var(--cs-lh-body) var(--cs-body);
  letter-spacing: var(--cs-tr-body);
}

h1, h2, h3, .display {
  font-family: var(--cs-display);
  font-weight: 700;
  letter-spacing: var(--cs-tr-head);
  line-height: var(--cs-lh-head);
}
.display { font-size: var(--cs-t-display); line-height: var(--cs-lh-tight);
           letter-spacing: var(--cs-tr-display); }
h1 { font-size: var(--cs-t-h1); }
h2 { font-size: var(--cs-t-h2); }
h3 { font-size: var(--cs-t-h3); }

.lede { font-size: var(--cs-t-lede); line-height: 1.5; color: var(--cs-text-2);
        max-width: 48ch; }
p { max-width: var(--cs-measure); }
.secondary { color: var(--cs-text-2); }

/* labels — the only uppercase in the system */
.label {
  font: 500 var(--cs-t-label)/1 var(--cs-mono);
  letter-spacing: var(--cs-tr-label);
  text-transform: uppercase;
  color: var(--cs-text-2);   /* NOT text-mute — 12px labels need 4.5:1 */
}

/* numbers — always display face, always tabular */
.figure {
  font-family: var(--cs-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--cs-live-deep);   /* live-deep on bone; swap to --cs-live on obsidian */
}

/* ============================================================
   SURFACES — light leads, obsidian punctuates
   Rule: max 3 dark sections per page. Never two adjacent.
   ============================================================ */
.section { padding-block: var(--cs-section-y); }
.wrap { max-width: var(--cs-max); margin-inline: auto; padding-inline: var(--cs-gutter); }

.section--dark {
  background: var(--cs-obsidian);
  color: var(--cs-text-invert);
}
.section--dark .lede,
.section--dark .secondary { color: #A1A1A6; }
.section--dark .label     { color: #8E8E93; }  /* 6.07:1 — #6E6E73 was 3.90:1 here */
.section--dark .figure    { color: var(--cs-live); }  /* 5.43:1 — safe on obsidian */
.section--dark hr         { border-color: var(--cs-hairline-dk); }

hr { border: 0; border-top: 1px solid var(--cs-hairline); margin: 0; }

/* ============================================================
   INTERACTIVE — blue marks the live element
   ============================================================ */
a {
  color: var(--cs-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--cs-fast) var(--cs-ease);
}
a:hover { color: var(--cs-live-deep); }
.section--dark a { color: var(--cs-text-invert); }
.section--dark a:hover { color: var(--cs-live); }

/* focus — never remove this */
:focus-visible {
  outline: 2px solid var(--cs-live-deep);
  outline-offset: 2px;
  border-radius: 2px;
}
.section--dark :focus-visible { outline-color: var(--cs-live); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 var(--cs-t-body)/1 var(--cs-body);
  letter-spacing: -0.004em;
  padding: var(--cs-3) var(--cs-6);
  border-radius: 2px;              /* nearly square. never pill */
  border: 1px solid transparent;
  text-decoration: none;
  transition: background var(--cs-fast) var(--cs-ease),
              color var(--cs-fast) var(--cs-ease),
              border-color var(--cs-fast) var(--cs-ease);
}
.btn--primary { background: var(--cs-live-deep); color: var(--cs-bone); }
.btn--primary:hover { background: #0051B0; }
.btn--ghost { background: transparent; color: var(--cs-text);
              border-color: var(--cs-text); }
.btn--ghost:hover { background: var(--cs-text); color: var(--cs-bone); }
.section--dark .btn--ghost { color: var(--cs-text-invert); border-color: var(--cs-text-invert); }
.section--dark .btn--ghost:hover { background: var(--cs-text-invert); color: var(--cs-obsidian); }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ============================================================
   FORM — hairline underline only. no boxes.
   ============================================================ */
.field { display: block; margin-bottom: var(--cs-8); }
.field > .label { display: block; margin-bottom: var(--cs-2); }
.field input, .field textarea, .field select {
  width: 100%;
  font: 400 var(--cs-t-body)/1.5 var(--cs-body);
  color: var(--cs-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cs-hairline);
  padding: var(--cs-2) 0;
  border-radius: 0;
  transition: border-color var(--cs-fast) var(--cs-ease);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--cs-live-deep);
}
.field--error input { border-bottom-color: var(--cs-alert); }
.field .error { color: var(--cs-alert); font-size: var(--cs-t-small); margin-top: var(--cs-1); }

/* ============================================================
   MOTION — opacity and 12px of travel. nothing else.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--cs-reveal) var(--cs-ease),
              transform var(--cs-reveal) var(--cs-ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   BREAKPOINTS  — sm 640 · md 768 · lg 1024 · xl 1280
   Mobile is one column. Two columns at md. Never three.
   ============================================================ */
.cols { display: grid; gap: var(--cs-8); }
@media (min-width: 768px) { .cols--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cols--sidebar { grid-template-columns: 16rem 1fr; } }