/* Split Frame — design tokens.
   Brand teal #0f9dbd and green #30a67f come from mycarpetcleaning.us.
   Both are used only for large marks (frames, rings, tags); anything that
   carries text uses the "-ink" steps, which pass WCAG AA on every ground
   below. Single light theme on purpose: techs work in daylight. */

:root {
  /* Ink & grounds */
  --deep: #06343d;          /* primary text, primary buttons   (11.9:1 on mist) */
  --deep-2: #0b4854;        /* hover on deep */
  --ink-2: #3f5f67;         /* secondary text                  (6.1:1 on mist)  */
  --ink-3: #5b767d;         /* tertiary / placeholders         (4.9:1 on white) */
  --mist: #eaf3f4;          /* app ground */
  --mist-2: #dcebed;        /* pressed / wells */
  --surface: #ffffff;
  --line: rgba(6, 52, 61, 0.13);
  --line-strong: rgba(6, 52, 61, 0.28);

  /* Brand */
  --brand: #0f9dbd;         /* marks only — never text on white */
  --brand-ink: #0a6f86;     /* text + brand buttons            (5.8:1 w/ white) */
  --brand-tint: #e1f2f7;
  --after: #30a67f;         /* "after" marks */
  --after-ink: #17714f;     /* "after" text / success          (6.0:1 w/ white) */
  --after-tint: #dcf3ea;

  /* Status */
  --warn-ink: #8a5100;  --warn-tint: #fff1cf;  --warn-mark: #e3a008;
  --danger-ink: #a8231b; --danger-tint: #fde8e6;
  --flag: #fff0c2;

  /* Type — one family, Bricolage Grotesque, optical size does the work */
  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-md: 1.0625rem;   /* 17 — body on phones */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-xl: 1.5rem;      /* 24 */
  --fs-2xl: 2rem;       /* 32 */
  --fs-3xl: 2.75rem;    /* 44 */
  --lh-tight: 1.08;
  --lh-body: 1.5;
  --lh-sentence: 1.8;

  /* Space (4px grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* Shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Elevation — only floating things get a shadow */
  --e-float: 0 10px 28px -10px rgba(6, 52, 61, 0.40);
  --e-sheet: 0 -14px 36px rgba(6, 52, 61, 0.20);
  --e-handle: 0 4px 12px rgba(0, 0, 0, 0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast: 120ms;
  --t-med: 200ms;
  --t-sheet: 260ms;

  /* Controls */
  --tap: 48px;        /* minimum target */
  --tap-lg: 58px;     /* primary actions */
  --focus: 0 0 0 3px var(--surface), 0 0 0 6px var(--brand);

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; --t-sheet: 0ms; }
}