/* ============================================================
   The Shift — Design Tokens
   ------------------------------------------------------------
   Single source of truth for color, type, spacing, radii,
   shadows and motion. Import this file from any artifact:

     <link rel="stylesheet" href="../colors_and_type.css" />

   Fonts are loaded from Google Fonts (no local TTFs).

   ────────────────────────────────────────────────────────────
   TWO-LAYER COLOR ARCHITECTURE
   ────────────────────────────────────────────────────────────
   This file uses a two-layer token model. Components MUST
   only reference Layer 2.

     Layer 1 — PALETTE (--shift-blue, --shift-green, …)
       Names a color. Declares what colors exist in the brand.
       Never referenced by components, slides, or pages.

     Layer 2 — ROLES (--cta-bg, --fg, --bg, --link, …)
       Names a JOB the color does. This is what components
       reference. If the brand recolors later (e.g. navy → forest),
       Layer 2 mappings change; component code stays untouched.

   If you find yourself writing var(--shift-blue) in a component,
   it means you owe yourself a role token. Add it to Layer 2 first,
   then use it.
   ============================================================ */

/* Fonts are SELF-HOSTED, deliberately. This file used to @import them from
   fonts.googleapis.com, which made every load of this dashboard send the
   viewer's IP, User-Agent and Referer to Google from a PHI-facing surface, on
   a service that is not on the Google Cloud HIPAA covered-products list. The
   whole design rule for this project is that everything in or around the PHI
   path sits on covered paper, so the request has to go, not just be justified.
   Do not reintroduce the @import, and do not add a new external font, icon, or
   script host to this dashboard.

   Only the latin subset is shipped, and only the weights actually used (400,
   600, 700). Inter is a variable font, so one file serves the whole range;
   Poppins is static, so it needs one file per weight. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700.woff2') format('woff2');
}

:root {
  /* ============================================================
     LAYER 1 — PALETTE
     Declares the brand's color vocabulary. Do not use directly.
     ============================================================ */

  /* Primary navy (from logo + live landing page) */
  --shift-blue:        #034a76;   /* hsl 203 95% 24% — Primary Blue, ratified by Terry
                                     2026-08-10. Hex extracted from the logo SVG and
                                     recorded in CLAUDE.md. Supersedes #004C75. */
  --shift-blue-mid:    #0A5F96;
  --shift-blue-deep:   #002A47;
  --shift-blue-light:  #E8F2FA;
  --shift-blue-tint:   #F7FAFD;

  /* Sage green (logo arrow) */
  --shift-green:       #73AD76;
  --shift-green-deep:  #5A8F5D;
  --shift-green-light: #EEF6EE;

  /* Warm neutral foundation */
  --shift-cream:       #FAF7F2;
  --shift-stone:       #F4F0EA;

  /* Cool app foundation */
  --shift-bg:          #F4F8FC;
  --shift-surface:     #FFFFFF;
  --shift-border:      #E2ECF4;
  --shift-border-warm: #ECE6DB;

  /* Ink — text greys */
  --shift-ink:         #1A1A1A;
  --shift-ink-soft:    #3D4654;
  --shift-ink-muted:   #6B7280;
  --shift-ink-faint:   #9CA3AF;

  /* State colors */
  --shift-success:     #5A8F5D;
  --shift-warning:     #B88A2E;
  --shift-danger:      #B14545;

  /* Brand tint for shadows — components SHOULD NOT use directly.
     Used by --shadow-* tokens below; declared here so a brand
     color change updates shadows alongside surfaces. */
  --shift-shadow-tint: 0, 76, 117;

  /* ============================================================
     LAYER 2 — ROLE TOKENS
     This is what components reference. Add new role tokens here
     when a component needs a new job done.
     ============================================================ */

  /* ── Text foreground ─────────────────────────────────────── */
  --fg:               var(--shift-ink);          /* default body text on light */
  --fg-soft:          var(--shift-ink-soft);     /* secondary body text */
  --fg-muted:         var(--shift-ink-muted);    /* meta, supporting copy */
  --fg-faint:         var(--shift-ink-faint);    /* placeholder, disabled */
  --fg-on-dark:       #FFFFFF;                   /* text on dark surfaces */
  --fg-on-cta:        #FFFFFF;                   /* text on primary CTA */

  /* ── Headings ────────────────────────────────────────────── */
  --heading:          var(--shift-ink);          /* default heading color */
  --heading-display:  var(--shift-blue-deep);    /* big hero/display heads */

  /* ── Surfaces ────────────────────────────────────────────── */
  --bg:               var(--shift-bg);           /* default app/page bg */
  --bg-soft:          var(--shift-blue-tint);    /* cool soft section break */
  --bg-warm:          var(--shift-cream);        /* warm cream section break */
  --bg-deep:          var(--shift-blue-deep);    /* dark sections, footer, hero overlay */
  --surface:          var(--shift-surface);      /* white card / panel */
  --selected-bg:      var(--shift-blue-light);   /* selected option / active surface */

  /* ── Borders ─────────────────────────────────────────────── */
  --border:           var(--shift-border);       /* default 1px hairline */
  --border-warm:      var(--shift-border-warm);  /* hairline on cream surfaces */
  --border-on-dark:   rgba(255, 255, 255, 0.10); /* hairline on dark surfaces */

  /* ── Action (primary CTA) ────────────────────────────────── */
  --cta-bg:           var(--shift-blue);
  --cta-bg-hover:     var(--shift-blue-mid);
  --cta-fg:           var(--fg-on-cta);

  /* ── Link (inline text link) ─────────────────────────────── */
  --link:             var(--shift-blue);
  --link-hover:       var(--shift-blue-mid);

  /* ── Accent (sage green — small flourishes only) ─────────── */
  --accent:           var(--shift-green);
  --accent-deep:      var(--shift-green-deep);
  --accent-tint:      var(--shift-green-light);

  /* ── State ───────────────────────────────────────────────── */
  --focus-ring:       0 0 0 3px rgba(var(--shift-shadow-tint), 0.10);
  --success:          var(--shift-success);
  --success-tint:     var(--shift-green-light);
  --warning:          var(--shift-warning);
  --danger:           var(--shift-danger);
  --info:             var(--shift-blue-mid);

  /* ── Shadow tint (semantic alias for brand-tinted rgba) ─── */
  /* Use as: rgba(var(--shadow-tint-rgb), 0.X). Lets shadows and
     ad-hoc tinted backgrounds track the brand color. */
  --shadow-tint-rgb:  var(--shift-shadow-tint);

  /* ── Eyebrow (small-caps accent label) ───────────────────── */
  --eyebrow:          var(--cta-bg);

  /* --------------------------------------------------------
     TYPOGRAPHY
     -------------------------------------------------------- */
  --font-head: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:    0.75rem;     /* 12px — meta, legal */
  --fs-sm:    0.8125rem;   /* 13px — caption */
  --fs-base:  1rem;        /* 16px — body */
  --fs-md:    1rem;        /* 16px — body large */
  --fs-lg:    1.125rem;    /* 18px — lead */
  --fs-xl:    1.375rem;    /* 22px — h4 / card title */
  --fs-2xl:   1.75rem;     /* 28px — h3 */
  --fs-3xl:   2.25rem;     /* 36px — h2 */
  --fs-4xl:   3rem;        /* 48px — h1 */
  --fs-5xl:   3.75rem;     /* 60px — display */

  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;
  --lh-loose:    1.85;

  --tracking-tight:   -0.025em;
  --tracking-snug:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;
  --tracking-widest:   0.2em;

  /* --------------------------------------------------------
     SPACING — 4px base
     -------------------------------------------------------- */
  --sp-0:    0;
  --sp-1:    0.25rem;    /* 4 */
  --sp-2:    0.5rem;     /* 8 */
  --sp-3:    0.75rem;    /* 12 */
  --sp-4:    1rem;       /* 16 */
  --sp-5:    1.25rem;    /* 20 */
  --sp-6:    1.5rem;     /* 24 */
  --sp-8:    2rem;       /* 32 */
  --sp-10:   2.5rem;     /* 40 */
  --sp-12:   3rem;       /* 48 */
  --sp-16:   4rem;       /* 64 */
  --sp-20:   5rem;       /* 80 */
  --sp-24:   6rem;       /* 96 */

  --container:        1200px;
  --container-narrow: 680px;

  /* --------------------------------------------------------
     RADII
     -------------------------------------------------------- */
  --radius-sm:    6px;
  --radius:       8px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* --------------------------------------------------------
     SHADOWS — Tinted with the brand's CTA color
     (rebuild rgba alphas if --shift-shadow-tint changes)
     -------------------------------------------------------- */
  --shadow-xs:     0 1px 2px  rgba(var(--shift-shadow-tint), 0.05);
  --shadow-sm:     0 2px 8px  rgba(var(--shift-shadow-tint), 0.07);
  --shadow-md:     0 8px 24px rgba(var(--shift-shadow-tint), 0.10);
  --shadow-lg:     0 16px 40px rgba(var(--shift-shadow-tint), 0.12);
  --shadow-button: 0 2px 8px  rgba(var(--shift-shadow-tint), 0.18);
  --shadow-ring:   var(--focus-ring);

  /* Signature "premium glow" — soft outer halo, multi-layer. */
  --shadow-glow:        0 1px 3px  rgba(var(--shift-shadow-tint), 0.04),
                        0 8px 28px rgba(var(--shift-shadow-tint), 0.07);
  --shadow-glow-strong: 0 1px 4px  rgba(var(--shift-shadow-tint), 0.05),
                        0 16px 40px rgba(var(--shift-shadow-tint), 0.10);

  /* --------------------------------------------------------
     MOTION
     -------------------------------------------------------- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-linear:   linear;

  --dur-fast:      150ms;
  --dur-base:      200ms;
  --dur-slow:      300ms;
  --dur-slower:    500ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use directly: <h1 class="t-h1">…</h1>
   ============================================================ */

.t-display {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--heading-display);
}

.t-h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--heading);
}

.t-h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.625rem, 3vw, var(--fs-3xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--heading);
}

.t-h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--heading);
}

.t-h4 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--heading);
}

.t-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-soft);
}

.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}

.t-meta {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.t-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-xs);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

.t-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--eyebrow);
}

.t-eyebrow--green { color: var(--accent-deep); }
.t-eyebrow--muted { color: var(--fg-muted); }

.t-quote {
  font-family: var(--font-head);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--heading-display);
}

/* ============================================================
   GLOBAL DEFAULTS (opt-in via .shift-doc on a wrapping element)
   ============================================================ */

.shift-doc,
.shift-doc * { box-sizing: border-box; }

.shift-doc {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.shift-doc h1, .shift-doc h2, .shift-doc h3,
.shift-doc h4, .shift-doc h5, .shift-doc h6 {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  color: var(--heading);
  margin: 0;
}

.shift-doc p { margin: 0 0 var(--sp-4); }

.shift-doc a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-base) var(--ease-in-out);
}
.shift-doc a:hover { color: var(--link-hover); }

/* ============================================================
   SIGNATURE COMPONENT PATTERNS
   ============================================================ */

/* Glow card — 1px tinted hairline + multi-layer halo on white.
   The brand's premium-but-unfussy elevation. */
.shift-card {
  background: var(--surface);
  border: 1px solid rgba(var(--shift-shadow-tint), 0.12);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glow);
  padding: var(--sp-8);
  transition: box-shadow var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

/* Accent variant — featured / "Most Popular". Full-strength border + stronger glow. */
.shift-card--accent {
  border-color: var(--cta-bg);
  box-shadow: var(--shadow-glow-strong);
}

/* Banner variant — soft pale-blue interior, wider padding. */
.shift-card--banner {
  background: linear-gradient(180deg, var(--selected-bg) 0%, var(--surface) 100%);
  border-color: rgba(var(--shift-shadow-tint), 0.18);
  padding: var(--sp-10) var(--sp-8);
}

/* Notch pill — small pill sitting on top of a card's border. */
.shift-notch-pill {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-button);
  white-space: nowrap;
}
.shift-notch-pill--green {
  background: var(--accent-deep);
  box-shadow: 0 2px 8px rgba(90, 143, 93, 0.25);
}

/* Tag pill — soft tinted price/feature tag inside service cards. */
.shift-tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  border: 1px solid rgba(90, 143, 93, 0.2);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
}
.shift-tag-pill--blue {
  background: var(--selected-bg);
  color: var(--cta-bg);
  border-color: rgba(var(--shift-shadow-tint), 0.18);
}