/* =========================================================================
   Mango ACO — Colors & Type
   Ported from the Mango ACO Design System (`_ds/.../colors_and_type.css`).

   This file is the design-system contract. Keep it in sync with the source
   of truth in Claude Design; put page-specific styling in a sibling file
   (e.g. coming-soon.css) rather than editing tokens here.

   Deviations from the source, both deliberate:
     1. The @font-face block is commented out — the Aptos files are not in
        this repo yet. See "Fonts" below and fonts/README.md.
     2. --font-* stacks carry richer fallbacks (Segoe UI Variable / Segoe UI)
        so the page still reads as a warm humanist sans without Aptos.
   ========================================================================= */

/* --- Fonts: Aptos (brand) ---
   No Aptos files ship with this repo yet, so there is nothing to @font-face.
   The --font-* stacks below name 'Aptos' and 'Aptos Display' first, which is
   enough on its own: a visitor who has Aptos installed (it ships with
   Microsoft 365, so many clinicians will) gets the brand face with no
   download, and everyone else falls through to Segoe UI / system-ui.

   To self-host instead — the right answer for a public site, so type does not
   depend on the visitor's machine — drop the files into fonts/ and uncomment
   this block. Declaring a face whose file is missing is not free: the browser
   requests every @font-face it actually uses, so leaving these live against an
   empty fonts/ directory costs six 404s on every page load.

   Licensing note: Aptos is Microsoft's. Confirm the EULA permits web
   embedding before self-hosting it on a public site.

@font-face {
  font-family: 'Aptos';
  src: local('Aptos'), url('../fonts/Aptos.woff2') format('woff2'),
    url('../fonts/Aptos.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aptos';
  src: local('Aptos SemiBold'), local('Aptos-SemiBold'),
    url('../fonts/Aptos-SemiBold.woff2') format('woff2'),
    url('../fonts/Aptos-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aptos';
  src: local('Aptos Bold'), local('Aptos-Bold'),
    url('../fonts/Aptos-Bold.woff2') format('woff2'),
    url('../fonts/Aptos-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aptos Display';
  src: local('Aptos Display'), local('Aptos-Display'),
    url('../fonts/Aptos-Display.woff2') format('woff2'),
    url('../fonts/Aptos-Display.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aptos Display';
  src: local('Aptos Display Bold'), local('Aptos-Display-Bold'),
    url('../fonts/Aptos-Display-Bold.woff2') format('woff2'),
    url('../fonts/Aptos-Display-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

:root {
  /* =========================================================
     CORE MANGO GRADIENT RAMP (the fruit)
     Green-leaf → yellow-flesh → orange-skin → red-blush
     ========================================================= */
  --mango-green-900: #1f5a1a;
  --mango-green-700: #3d8f2e;
  --mango-green-500: #5cc430; /* leaf */
  --mango-green-300: #a6e25a;
  --mango-yellow-500: #ffd21f;
  --mango-orange-500: #ff8a1f; /* skin */
  --mango-orange-400: #ffa347;
  --mango-red-500: #ef3a2e; /* blush */
  --mango-red-700: #b01a1a;

  /* =========================================================
     ELECTRIC NEON ACCENTS (dusk / interactive)
     Hot fuchsia bleeding into sunset pink
     ========================================================= */
  --neon-fuchsia-500: #ff2bd6;
  --neon-pink-500: #ff5e93;
  --neon-sunset-500: #ff6a3d;
  --neon-magenta-700: #c61a9a;

  /* =========================================================
     NEUTRALS (warm-leaning grays, never pure cool)
     --ink-800/900/1000 are TEXT, ICON & BORDER colors only —
     never use them as a surface/background. Surfaces stay in
     the --ink-0 → --ink-200 range. No dark mode.
     ========================================================= */
  --ink-1000: #0c0a09; /* near-black warm undertone — text/icons only */
  --ink-900: #1b1614; /* text/icons only */
  --ink-800: #2a2320; /* text/icons only */
  --ink-700: #4a3f3a;
  --ink-500: #746761;
  --ink-400: #9a8b84;
  --ink-300: #c2b6af;
  --ink-200: #e3dcd6;
  --ink-100: #f3ede7;
  --ink-50: #faf6f1; /* warm paper */
  --ink-0: #ffffff;

  /* =========================================================
     SEMANTIC FOREGROUNDS / BACKGROUNDS
     ========================================================= */
  --fg-1: var(--ink-1000); /* primary text */
  --fg-2: var(--ink-700); /* secondary text */
  --fg-3: var(--ink-500); /* tertiary / meta */
  --fg-muted: var(--ink-400);
  --fg-on-hot: var(--ink-0); /* text on saturated gradients */

  --bg-1: var(--ink-0); /* surfaces */
  --bg-2: var(--ink-50); /* page */
  --bg-3: var(--ink-100); /* sunken — darkest allowed surface tint is --ink-200 */

  --border-1: var(--ink-200);
  --border-2: var(--ink-300);
  --border-hot: var(--mango-orange-500);

  /* =========================================================
     SEMANTIC STATUS
     ========================================================= */
  --success: var(--mango-green-700);
  --success-bg: #e7f6dd;
  --warning: var(--mango-orange-500);
  --warning-bg: #fff1df;
  --danger: var(--mango-red-500);
  --danger-bg: #fde1de;
  --info: var(--neon-fuchsia-500);
  --info-bg: #ffe0f7;

  /* =========================================================
     SIGNATURE GRADIENTS
     These bleed/melt — do not use hard stops
     ========================================================= */
  --grad-mango: linear-gradient(
    115deg,
    var(--mango-green-500) 0%,
    var(--mango-yellow-500) 32%,
    var(--mango-orange-500) 62%,
    var(--mango-red-500) 100%
  );

  --grad-dusk: linear-gradient(
    120deg,
    var(--mango-orange-500) 0%,
    var(--neon-pink-500) 50%,
    var(--neon-fuchsia-500) 100%
  );

  --grad-neon: linear-gradient(
    135deg,
    var(--neon-sunset-500) 0%,
    var(--neon-pink-500) 45%,
    var(--neon-fuchsia-500) 100%
  );

  --grad-ember: radial-gradient(
    120% 120% at 20% 10%,
    var(--mango-yellow-500) 0%,
    var(--mango-orange-500) 35%,
    var(--mango-red-500) 70%,
    var(--neon-magenta-700) 100%
  );

  --grad-leaf: linear-gradient(
    120deg,
    var(--mango-green-300) 0%,
    var(--mango-green-500) 60%,
    var(--mango-yellow-500) 100%
  );

  --grad-paper: linear-gradient(180deg, #fff8ee 0%, var(--ink-50) 100%);

  /* =========================================================
     TYPOGRAPHY — families
     ========================================================= */
  --font-display: 'Aptos Display', 'Aptos', 'Segoe UI Variable Display',
    'Segoe UI', system-ui, sans-serif; /* brand display */
  --font-sans: 'Aptos', 'Segoe UI Variable Text', 'Segoe UI', system-ui,
    sans-serif; /* brand body/UI */
  --font-serif: 'Aptos Serif', 'Georgia', serif; /* brand editorial serif */
  --font-narrow: 'Aptos Narrow', 'Aptos', system-ui, sans-serif; /* condensed */
  --font-mono: 'Aptos Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* Type scale (modular, 1.25 major third) */
  --fs-display-xl: clamp(56px, 7vw, 96px);
  --fs-display-l: clamp(44px, 5.2vw, 72px);
  --fs-display-m: clamp(36px, 4vw, 56px);
  --fs-h1: 44px;
  --fs-h2: 34px;
  --fs-h3: 26px;
  --fs-h4: 20px;
  --fs-body-l: 18px;
  --fs-body: 16px;
  --fs-body-s: 14px;
  --fs-caption: 12px;
  --fs-micro: 11px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.12em;

  /* =========================================================
     SPACING (4-based with a couple of half-steps)
     ========================================================= */
  --s-0: 0;
  --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;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* =========================================================
     RADII — generous, mango-pit-round
     ========================================================= */
  --r-xs: 4px;
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* =========================================================
     SHADOWS — warm-tinted, never cool-gray
     ========================================================= */
  --shadow-xs: 0 1px 2px rgba(176, 26, 26, 0.06);
  --shadow-s: 0 2px 6px rgba(176, 26, 26, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-m: 0 8px 24px rgba(176, 26, 26, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-l: 0 20px 48px rgba(198, 26, 154, 0.15), 0 6px 14px rgba(0, 0, 0, 0.06);
  --shadow-glow-mango: 0 0 0 1px rgba(255, 138, 31, 0.35),
    0 10px 30px rgba(255, 138, 31, 0.35);
  --shadow-glow-neon: 0 0 0 1px rgba(255, 43, 214, 0.35),
    0 10px 36px rgba(255, 43, 214, 0.4);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 360ms;
  --dur-4: 600ms;
}

/* =========================================================================
   SEMANTIC ELEMENTS — opinionated defaults
   ========================================================================= */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
.h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--fg-1);
}
h2,
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}
h3,
.h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: 700;
  letter-spacing: -0.01em;
}
h4,
.h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: 700;
}
p,
.body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  text-wrap: pretty;
}
.lead {
  font-size: var(--fs-body-l);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  letter-spacing: var(--tracking-wide);
}
.eyebrow {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--mango-red-500);
}
code,
.code,
kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}

/* Gradient text utility — use sparingly on hero moments */
.text-grad-mango {
  background: var(--grad-mango);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-grad-dusk {
  background: var(--grad-dusk);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Gradient text paints through the glyphs, so `color` is transparent. Forced-
   colors modes drop the background and the text would vanish — put it back. */
@media (forced-colors: active) {
  .text-grad-mango,
  .text-grad-dusk {
    background: none;
    color: CanvasText;
    forced-color-adjust: none;
  }
}