/* ============================================================================
   theme.css — SpotMedics GLOBAL "Rubinsapp" theme foundation
   ----------------------------------------------------------------------------
   Loads on public.tpl ONLY, AFTER tailwind.min.css AND app.css, so it wins by
   cascade order (equal-specificity single-class overrides beat the earlier
   sheets). This is the load-bearing first layer of the site-wide redesign: it
   (1) self-hosts the 3 brand fonts, (2) publishes the design tokens, and
   (3) rebrands the old sky/blue/indigo + slate Tailwind palette to the new
   paper/ink/teal system across every public page at once.

   PILOT SAFETY: the approved doctor-profile pilot styles itself with
   higher-specificity scoped selectors (`.rubins ...` = 2 classes, and
   `body.rubins-doc > header ...`). Every rule below is a single class or a bare
   element selector, so the pilot's scoped rules ALWAYS win over this global
   layer — this file cannot alter the pilot.

   SEMANTIC COLORS PRESERVED: emerald / green / amber / red / rose / orange /
   yellow / violet are intentionally NOT remapped here (success, warning, error,
   decorative accents keep their meaning). Only the blue/slate BRAND palette is
   replaced.

   REVERT: delete this file + remove its <link> in app/templates/public.tpl.
   ============================================================================ */

/* ---- 1. self-hosted faces (latin woff2, swap) — CSP blocks Google Fonts CDN ---- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/spacegrotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/spacegrotesk-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/spacegrotesk-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibmplexmono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibmplexmono-500.woff2') format('woff2')}

/* ---- 2. design tokens ---- */
:root{
  /* new Rubinsapp palette */
  --paper:#f5f2ec; --card:#ffffff; --line:#e3ddd2; --line-2:#ece7de;
  --ink:#1d2a30; --ink2:#16222a; --ink-soft:#2b3a42;
  --muted:#5c6670; --muted2:#8a9099;
  --teal:#137a63; --teal-hover:#0f6a55; --teal-ink:#0a4d3e; --teal-tint:#e2f0eb; --teal-tint2:#d3e8e0; --teal-lite:#5cc0a8;
  --coral:#e0603f; --coral-hover:#cf512f; --coral-lite:#e5836a;
  --radius-rb:14px; --radius-rb-lg:20px; --radius-rb-pill:999px;
  --display:"Space Grotesk",system-ui,-apple-system,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --shadow-rb:0 1px 2px rgba(29,42,48,.05),0 14px 30px -22px rgba(29,42,48,.35);
  --shadow-rb-lg:0 18px 40px -20px rgba(29,42,48,.45);

  /* flip legacy app.css brand tokens → new palette. This alone rebrands
     .btn-primary/.btn-outline/.spec-pill/.input/.badge-specialty/body/etc.,
     which are all defined in app.css against these vars. */
  --color-primary:#137a63; --color-primary-dark:#0f6a55; --color-primary-light:#e2f0eb;
  --color-accent:#137a63; --color-accent-dark:#0f6a55;
  --color-surface:#f5f2ec; --color-dark:#1d2a30; --color-text:#1d2a30;
  --color-border:#e3ddd2; --color-muted:#5c6670;
}

/* ---- 3. base typography + surface ---- */
body{background-color:var(--paper);color:var(--ink);font-family:var(--body)}
/* the template puts `font-sans` on <body>; Tailwind's system stack would beat
   app.css's body{font-family} — force Inter here so body computes to Inter. */
.font-sans{font-family:var(--body)}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.01em;line-height:1.15}
h1{font-weight:700}
h2,h3,h4{font-weight:600}
/* eyebrow / micro-label utility (mono, uppercase, tracked) */
.rb-eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-weight:500;font-size:.6875rem}

/* ============================================================================
   4. BRAND PALETTE OVERRIDE  (single-class → beats tailwind by load order)
   ============================================================================ */

/* ---- 4a. SLATE ink text ramp → ink / muted / muted2 ---- */
.text-slate-900,.text-slate-800{color:var(--ink)}
.text-slate-700,.text-slate-600{color:var(--muted)}
.text-slate-500,.text-slate-400{color:var(--muted2)}
.text-slate-100{color:#eef1ee}                 /* light label on dark surfaces */
.hover\:text-slate-900:hover,.hover\:text-slate-800:hover{color:var(--ink)}
.hover\:text-slate-700:hover,.hover\:text-slate-600:hover{color:var(--muted)}
.hover\:text-slate-400:hover{color:var(--muted2)}
.group:hover .group-hover\:text-slate-900{color:var(--ink)}
/* (slate-300 / slate-200 text left as-is: light greys used on dark bands) */

/* ---- 4b. SLATE borders → line (light) / ink-soft (dark surfaces) ---- */
.border-slate-200,.border-slate-100,.border-slate-300,.border-slate-50,.border-slate-400,.border-slate-500{border-color:var(--line)}
.border-slate-800,.border-slate-700,.border-slate-600{border-color:var(--ink-soft)}
.hover\:border-slate-300:hover,.hover\:border-slate-200:hover{border-color:var(--muted2)}
.divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.divide-slate-50  > :not([hidden]) ~ :not([hidden]){border-color:var(--line)}
.divide-slate-800 > :not([hidden]) ~ :not([hidden]){border-color:var(--ink-soft)}

/* ---- 4c. SLATE surfaces → paper / paper-2 / line, dark → ink family ---- */
.bg-slate-50{background-color:var(--paper)}
.bg-slate-100{background-color:var(--line-2)}
.bg-slate-200{background-color:var(--line)}
.bg-slate-300,.bg-slate-400{background-color:#cfc9bd}
.bg-slate-900{background-color:var(--ink)}
.bg-slate-800{background-color:var(--ink2)}
.bg-slate-700{background-color:var(--ink-soft)}
.hover\:bg-slate-50:hover{background-color:#efeae0}
.hover\:bg-slate-100:hover{background-color:var(--line-2)}
.hover\:bg-slate-200:hover{background-color:var(--line)}
.hover\:bg-slate-800:hover{background-color:var(--ink2)}
.group:hover .group-hover\:bg-slate-100{background-color:var(--line-2)}
.placeholder-slate-400::placeholder{color:var(--muted2)}
/* slate gradients (dark bands) → ink family */
.from-slate-900{--tw-gradient-from:#1d2a30 var(--tw-gradient-from-position);--tw-gradient-to:rgba(29,42,48,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-slate-50{--tw-gradient-from:#f5f2ec var(--tw-gradient-from-position);--tw-gradient-to:rgba(245,242,236,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.via-slate-800{--tw-gradient-to:rgba(22,34,42,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#16222a var(--tw-gradient-via-position),var(--tw-gradient-to)}
.to-slate-900{--tw-gradient-to:#1d2a30 var(--tw-gradient-to-position)}
.to-slate-800{--tw-gradient-to:#16222a var(--tw-gradient-to-position)}
.to-slate-50{--tw-gradient-to:#f5f2ec var(--tw-gradient-to-position)}

/* ---- 4d. SKY (primary brand blue) → TEAL ---- */
.text-sky-600,.text-sky-500{color:var(--teal)}
.text-sky-700,.text-sky-800,.text-sky-900{color:var(--teal-ink)}
.text-sky-400,.text-sky-300,.text-sky-200,.text-sky-100{color:var(--teal-lite)}
.hover\:text-sky-600:hover,.hover\:text-sky-500:hover,.hover\:text-sky-800:hover,.hover\:text-sky-900:hover{color:var(--teal)}
.hover\:text-sky-700:hover{color:var(--teal-ink)}
.hover\:text-sky-200:hover,.hover\:text-sky-300:hover{color:var(--teal-lite)}
.group:hover .group-hover\:text-sky-600,.group:hover .group-hover\:text-sky-700{color:var(--teal)}

.bg-sky-500,.bg-sky-400{background-color:var(--teal)}
.bg-sky-600,.bg-sky-700{background-color:var(--teal-hover)}
.bg-sky-300{background-color:var(--teal-lite)}
.bg-sky-50{background-color:var(--teal-tint)}
.bg-sky-100{background-color:var(--teal-tint2)}
.hover\:bg-sky-600:hover,.hover\:bg-sky-500:hover,.hover\:bg-sky-400:hover{background-color:var(--teal-hover)}
.hover\:bg-sky-700:hover{background-color:var(--teal-ink)}
.hover\:bg-sky-50:hover{background-color:var(--teal-tint)}
.hover\:bg-sky-100:hover{background-color:var(--teal-tint2)}
.group:hover .group-hover\:bg-sky-100{background-color:var(--teal-tint2)}
.bg-sky-500\/20,.bg-sky-500\/10{background-color:rgba(19,122,99,.14)}
.bg-sky-50\/80{background-color:rgba(226,240,235,.85)}

.border-sky-500,.border-sky-600,.border-sky-700,.border-sky-400,.border-sky-300{border-color:var(--teal)}
.border-sky-200{border-color:#a9d4c6}
.border-sky-100{border-color:#cfe4dc}
.border-sky-500\/40,.border-sky-500\/30{border-color:rgba(19,122,99,.35)}
.hover\:border-sky-300:hover,.hover\:border-sky-400:hover,.hover\:border-sky-200:hover{border-color:var(--teal)}
.group:hover .group-hover\:border-sky-400{border-color:var(--teal)}
.focus\:border-sky-400:focus,.focus\:border-sky-500:focus{border-color:var(--teal)}

/* focus rings + ring color → teal (Tailwind rings set --tw-ring-color) */
.ring-sky-500,.ring-sky-400,.ring-sky-300,.ring-sky-200{--tw-ring-color:rgb(19 122 99/var(--tw-ring-opacity,1))}
.focus\:ring-sky-300:focus,.focus\:ring-sky-100:focus,.focus\:ring-sky-400:focus,.focus\:ring-sky-200:focus{--tw-ring-color:rgb(19 122 99/var(--tw-ring-opacity,1))}
/* colored shadows → teal-tinted */
.shadow-sky-200,.shadow-sky-300{--tw-shadow-color:rgba(19,122,99,.4);--tw-shadow:var(--tw-shadow-colored)}

/* sky gradients → teal tints */
.from-sky-50{--tw-gradient-from:#e2f0eb var(--tw-gradient-from-position);--tw-gradient-to:rgba(226,240,235,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-sky-100{--tw-gradient-from:#d3e8e0 var(--tw-gradient-from-position);--tw-gradient-to:rgba(211,232,224,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-sky-400,.from-sky-500{--tw-gradient-from:#137a63 var(--tw-gradient-from-position);--tw-gradient-to:rgba(19,122,99,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-sky-50{--tw-gradient-to:#e2f0eb var(--tw-gradient-to-position)}
.to-sky-200{--tw-gradient-to:#bfe0d6 var(--tw-gradient-to-position)}
.to-sky-500{--tw-gradient-to:#137a63 var(--tw-gradient-to-position)}
.to-sky-600{--tw-gradient-to:#0f6a55 var(--tw-gradient-to-position)}

/* ---- 4d-bis. custom tailwind.config `primary` color token (#0ea5e9 = old sky) → TEAL.
   These are hardcoded in the compiled Tailwind build (they do NOT read app.css vars), so they
   must be overridden by class here. `accent-sky-500` is a form-control accent-color. ---- */
.bg-primary{background-color:var(--teal)}
.text-primary{color:var(--teal)}
.border-primary{border-color:var(--teal)}
.hover\:bg-primary:hover{background-color:var(--teal-hover)}
.hover\:text-primary:hover{color:var(--teal)}
.hover\:border-primary:hover{border-color:var(--teal)}
.accent-sky-500{accent-color:var(--teal)}

/* ---- 4e. BLUE (secondary brand blue) → TEAL ---- */
.text-blue-700,.text-blue-800{color:var(--teal-ink)}
.text-blue-600{color:var(--teal)}
.bg-blue-50{background-color:var(--teal-tint)}
.bg-blue-100{background-color:var(--teal-tint2)}
.border-blue-200{border-color:#a9d4c6}

/* ---- 4f. INDIGO (hub pills) → quiet teal-tint (no coral, matches pilot) ---- */
.bg-indigo-50{background-color:var(--teal-tint)}
.bg-indigo-100{background-color:var(--teal-tint2)}
.text-indigo-700{color:var(--teal-ink)}
.text-indigo-600{color:var(--teal)}
.border-indigo-100{border-color:#cfe4dc}
.hover\:bg-indigo-100:hover{background-color:var(--teal-tint2)}
.hover\:text-indigo-700:hover{color:var(--teal-ink)}

/* ============================================================================
   5. CARD SURFACE POLISH — white card + line hairline + soft shadow + softer
   radius, matching the pilot's card feel. (Radius/shadow only; layout untouched.)
   ============================================================================ */
.shadow-sm{box-shadow:var(--shadow-rb)}
.shadow-lg{box-shadow:var(--shadow-rb-lg)}
.rounded-2xl{border-radius:var(--radius-rb)}
.rounded-xl{border-radius:12px}