/* =============================================================
   CIRCLE CARE — COLORS & TYPE
   --------------------------------------------------------------
   Pantone-based palette + Graphik / Deacon Condensed type system.
   Drop this stylesheet into the <head> of any document and you
   inherit the full Circle Care visual baseline.

   Tagline   "We make boring things interesting."
   Mission   "How can we help you?" — care that goes all the way around.
   ============================================================= */

/* ---------- Web fonts ------------------------------------------------- */

/* Graphik — body workhorse */
@font-face {
  font-family: "Graphik";
  src: url("fonts/GraphikWeb-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("fonts/GraphikWeb-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("fonts/GraphikWeb-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("fonts/GraphikWeb-MediumItalic.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("fonts/GraphikWeb-Semibold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("fonts/GraphikWeb-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("fonts/GraphikWeb-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* Graphik Wide — italic-only display flourish (used in marginalia & callouts) */
@font-face {
  font-family: "Graphik Wide";
  src: url("fonts/GraphikWideMediumItalic.otf") format("opentype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Graphik Wide";
  src: url("fonts/GraphikWideBlackItalic.otf") format("opentype");
  font-weight: 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Graphik Wide";
  src: url("fonts/GraphikWideSuperItalic.otf") format("opentype");
  font-weight: 950; font-style: italic; font-display: swap;
}

/* Deacon Condensed — display headline. Big, tight, condensed. */
@font-face {
  font-family: "Deacon Condensed";
  src: url("fonts/Deacon-CondensedLight.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Deacon Condensed";
  src: url("fonts/Deacon-CondensedBook.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Deacon Condensed";
  src: url("fonts/Deacon-CondensedMedium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Deacon Condensed";
  src: url("fonts/Deacon-CondensedBold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Deacon Condensed";
  src: url("fonts/Deacon-CondensedBlack.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* =============================================================
   TOKENS
   ============================================================= */
:root {
  /* ---------- Brand colors (Pantone) ---------- */
  --cc-orange:        #FF5D2B; /* Pantone 171 C — the brand */
  --cc-orange-deep:   #E8451A; /* press / hover */
  --cc-orange-soft:   #FFE6D9; /* tint backgrounds */

  --cc-navy:          #1C2531; /* Pantone 295 C — text & strokes */
  --cc-navy-700:      #2A3445;
  --cc-navy-500:      #4A5568;

  --cc-blue:          #CCE2FA; /* Pantone 277 C — soft sky background */
  --cc-blue-soft:     #E0EAF4;
  --cc-blue-pale:     #EFF5FB;

  --cc-cream:         #F5F3EF; /* paper / center of target rings */
  --cc-cream-warm:    #EFEAE0;

  /* Secondary accents pulled from Howie illustrations */
  --cc-yellow:        #F7C843; /* butterfly highlights */
  --cc-green:         #2EBD7E; /* music notes / "the hills are alive" */
  --cc-purple:        #7C3AED; /* stage-phase accent */

  /* ---------- Foreground / background semantic ---------- */
  --fg-1: var(--cc-navy);          /* primary text, ink, strokes */
  --fg-2: var(--cc-navy-500);      /* secondary text, captions */
  --fg-3: #7D8693;                 /* tertiary, disabled */
  --fg-on-orange: var(--cc-cream); /* text over orange surfaces */
  --fg-on-navy:   var(--cc-cream);
  --fg-link:      var(--cc-orange);

  --bg-1: #FFFFFF;                 /* default page */
  --bg-2: var(--cc-cream);         /* warm paper */
  --bg-3: var(--cc-blue-pale);     /* cool secondary */
  --bg-brand: var(--cc-orange);
  --bg-brand-soft: var(--cc-blue);
  --bg-ink: var(--cc-navy);

  --border-1: rgba(28, 37, 49, 0.12);
  --border-2: rgba(28, 37, 49, 0.20);
  --border-strong: var(--cc-navy);

  /* ---------- Spacing (4px grid) ---------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- Radii ---------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;     /* the signature shape — wordmark sits in a pill */

  /* ---------- Borders / strokes ---------- */
  --stroke-hairline: 1px;
  --stroke-medium:   2px;
  --stroke-bold:     3px;   /* Howie-character outlines are bold strokes */
  --stroke-display:  4px;   /* used on big shapes / pill outlines */

  /* ---------- Shadows (used sparingly — brand is mostly flat) ---------- */
  --shadow-sm: 0 1px 2px rgba(28, 37, 49, 0.08);
  --shadow-md: 0 4px 12px rgba(28, 37, 49, 0.08);
  --shadow-lg: 0 16px 40px rgba(28, 37, 49, 0.12);
  --shadow-pop: 0 8px 0 0 var(--cc-navy); /* hard-stamp shadow on CTAs */

  /* ---------- Type scale (px) ---------- */
  --t-display-xl: 160px; /* poster headline — DEACON CONDENSED BLACK */
  --t-display-lg: 112px;
  --t-display-md: 80px;
  --t-display-sm: 56px;
  --t-h1: 44px;
  --t-h2: 32px;
  --t-h3: 24px;
  --t-h4: 20px;
  --t-body-lg: 18px;
  --t-body:    16px;
  --t-body-sm: 14px;
  --t-caption: 12px;
  --t-eyebrow: 11px;

  /* ---------- Font families ---------- */
  --font-display: "Deacon Condensed", "Anton", "Oswald", Impact, sans-serif;
  --font-body:    "Graphik", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-wide:    "Graphik Wide", "Graphik", "Inter", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* =============================================================
   SEMANTIC TYPE STYLES
   ============================================================= */

.cc-display-xl,
.cc-display-lg,
.cc-display-md,
.cc-display-sm {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--fg-1);
  text-wrap: balance;
}
.cc-display-xl { font-size: var(--t-display-xl); }
.cc-display-lg { font-size: var(--t-display-lg); }
.cc-display-md { font-size: var(--t-display-md); }
.cc-display-sm { font-size: var(--t-display-sm); line-height: 0.92; }

.cc-h1, .cc-h2, .cc-h3, .cc-h4 {
  font-family: var(--font-body);
  color: var(--fg-1);
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-wrap: balance;
}
.cc-h1 { font-size: var(--t-h1); font-weight: 700; }
.cc-h2 { font-size: var(--t-h2); font-weight: 700; }
.cc-h3 { font-size: var(--t-h3); font-weight: 600; }
.cc-h4 { font-size: var(--t-h4); font-weight: 600; }

.cc-body-lg { font: 400 var(--t-body-lg)/1.5 var(--font-body); color: var(--fg-1); }
.cc-body    { font: 400 var(--t-body)/1.55  var(--font-body); color: var(--fg-1); }
.cc-body-sm { font: 400 var(--t-body-sm)/1.5 var(--font-body); color: var(--fg-2); }
.cc-caption { font: 500 var(--t-caption)/1.4 var(--font-body); color: var(--fg-2); }

/* Eyebrow — small, all-caps, tracked-out label sitting above headlines */
.cc-eyebrow {
  font: 500 var(--t-eyebrow)/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Italic flourish — vertical marginalia in deck pages ("2025", "Mann Sales Co.") */
.cc-marginalia {
  font: 500 var(--t-caption)/1 var(--font-wide);
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--fg-2);
}

/* The signature pill — wraps "ABA" tag on the wordmark, used on CTA buttons */
.cc-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 2px solid currentColor;
  border-radius: var(--r-pill);
  font: 700 var(--t-caption)/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* =============================================================
   OPTIONAL — apply Circle Care defaults to bare HTML
   Add  class="cc-page"  to a <body> or root container.
   ============================================================= */
.cc-page {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.cc-page h1 { font: 700 var(--t-h1)/1.1 var(--font-body); letter-spacing: -0.01em; margin: 0 0 var(--sp-4); }
.cc-page h2 { font: 700 var(--t-h2)/1.15 var(--font-body); letter-spacing: -0.01em; margin: 0 0 var(--sp-3); }
.cc-page h3 { font: 600 var(--t-h3)/1.2  var(--font-body); margin: 0 0 var(--sp-3); }
.cc-page p  { margin: 0 0 var(--sp-4); }
.cc-page a  { color: var(--fg-link); text-decoration: none; border-bottom: 1px solid currentColor; }
.cc-page a:hover { color: var(--cc-orange-deep); }