/* Haptiv design system — GENERATED by scripts/build-haptiv-css.sh.
   Do not edit here. Edit components/haptiv/tokens/*.css and re-run. */

/* ---- tokens/fonts.css ---- */
/* Summ Base type.
 *
 * RENAMED 27 Aug 2026. Haptiv self-hosted Space Grotesk, DM Sans and Outfit
 * from /fonts/haptiv/. Summ Base uses the Summ pairing — Marcellus and
 * Urbanist — which globals.css already loads on BOTH hosts, so there is
 * nothing to declare here and no extra font request on any page.
 *
 * The three Haptiv woff2 files stay in public/fonts/haptiv/ for now, unused.
 * Delete them once the rename has been live long enough to be sure.
 *
 * If a Summ Base-only face is ever needed, use a conditional <link> in
 * app/layout.js and NOT next/font: a next/font import in that shared file is
 * hoisted regardless of the branch and lands in the consumer bundle
 * (CLAUDE.md §33).
 */

/* ---- tokens/colors.css ---- */
/* Summ Base colour tokens.
 *
 * RENAMED 27 Aug 2026: Haptiv became Summ Base, and the founder asked for
 * "the original Summ Nutrition colours and fonts, leave everything else as
 * is". So the TOKEN NAMES here are unchanged and every value is a Summ one.
 * That flips the whole estate — marketing, portal, employee space — without
 * touching a single component, which is the only way to reskin this much
 * surface without also changing layout by accident.
 *
 * Do not rename a token to something more Summ-ish. Every one of these is
 * referenced by name across app/ and components/, and the ramps (--teal-700,
 * --lime-500, --sage-300 and friends) are used directly in places. A rename
 * is a sweep; a revalue is this file.
 *
 * CONTRAST: every token used for text is checked against the ground it
 * actually renders on, on Summ paper (#F2F0EB) and on white cards. The
 * ratios are in the comments. CLAUDE.md calls 4.5:1 non-negotiable.
 */

:root {
  /* ---------- Base ramps ---------- */

  /* Paper — the Summ canvas. Never pure white at page level. */
  --cream-50: #FAF9F5;
  --cream-100: #F2F0EB;   /* --paper */
  --cream-200: #EAE7DF;
  --cream-300: #DDD9CE;

  /* Lava through off-black — the Summ darks. Primary lives here, because
     Summ's brand yellow cannot legally carry text on a light ground
     (CLAUDE.md §26) and something has to hold buttons and links. */
  --teal-900: #14201F;
  --teal-800: #1E1E1E;    /* --off-black */
  --teal-700: #3A4A47;    /* --lava, 8.2:1 on paper */
  --teal-600: #4A5C58;
  --teal-500: #5C7A55;    /* --moss-accessible */
  --teal-300: #B8C4C8;    /* --cool-gray, dark grounds only */
  --teal-100: #D6DBC0;    /* --pale-green */

  /* Sage — quiet secondary surface. */
  --sage-700: #4A6644;    /* --moss-chart */
  --sage-500: #D6DBC0;    /* --pale-green */
  --sage-300: #E4E7D6;
  --sage-100: #EFEDE4;

  /* Yellow — the loud one, in the lime slot. Fills and highlights only,
     never text on a light ground. Off-black on it is 8.45:1. */
  --lime-700: #B8860B;    /* --honey */
  --lime-500: #D4B827;    /* --yellow */
  --lime-300: #E3D06A;
  --lime-100: #F5EFCB;    /* --yellow-soft */

  /* Periwinkle slot — Summ has no periwinkle, so this becomes the blue-grey
     built around --muted. Data, tags, focus. */
  --peri-700: #555F6D;    /* --muted, 7:1 on paper */
  --peri-500: #8A93A0;
  --peri-300: #B8C4C8;    /* --cool-gray */
  --peri-100: #E6E9EC;

  /* Apricot slot — Summ's blush warmth. */
  --apricot-700: #A5643F;
  --apricot-500: #E0A98A;
  --apricot-300: #EDD5C8;  /* --blush */
  --apricot-100: #F7EBE4;

  /* Blush. */
  --blush-500: #E0A98A;
  --blush-300: #EDD5C8;   /* --blush */
  --blush-100: #F7EBE4;

  /* Ink — text and hairlines. */
  --ink-900: #1E1E1E;     /* --off-black */
  --ink-700: #3A4A47;     /* --lava */
  --ink-500: #555F6D;     /* --muted */
  --ink-400: #6B7480;
  --ink-300: #B8C4C8;     /* --cool-gray */
  --ink-200: #D8D9CC;     /* --warm-gray */

  --white: #FFFFFF;

  /* ---------- Semantic surfaces ---------- */
  --surface-canvas: var(--cream-100);
  --surface-canvas-alt: var(--cream-200);
  --surface-card: var(--white);
  --surface-sunken: var(--sage-100);
  --surface-inverse: var(--teal-800);
  --surface-inverse-alt: var(--teal-900);
  --surface-accent-sage: var(--sage-500);
  --surface-accent-lime: var(--lime-500);
  --surface-accent-peri: var(--peri-500);
  --surface-accent-apricot: var(--apricot-300);
  --surface-hover: rgba(58, 74, 71, 0.06);
  --surface-pressed: rgba(58, 74, 71, 0.12);

  /* ---------- Semantic text ---------- */
  --text-primary: var(--ink-900);           /* 16:1 on paper */
  --text-secondary: #555F6D;                /* --muted, 7:1 on paper */
  /* CLAUDE.md's own accessible label colour. 6.8:1 on paper, and it is used
     for 13 and 14px metadata, which is not large text. */
  --text-muted: #4A5C48;
  --text-inverse: var(--cream-100);         /* paper on off-black, 14.7:1 */
  --text-inverse-secondary: rgba(242, 240, 235, 0.74);
  --text-brand: var(--teal-700);            /* lava, 8.2:1 on paper */
  --text-link: var(--teal-700);
  --text-link-hover: var(--teal-900);

  /* ---------- Borders ---------- */
  --border-subtle: #E2E0D6;
  --border-default: var(--ink-200);         /* --warm-gray */
  --border-strong: var(--teal-700);
  --border-inverse: rgba(242, 240, 235, 0.24);

  /* ---------- Interactive ---------- */
  /* Lava, not yellow. Yellow is the highlight and is barred as text on a
     light ground; paper on lava is 8.2:1, so buttons stay legible. */
  --accent-primary: var(--teal-700);
  --accent-primary-hover: var(--teal-800);
  --accent-primary-pressed: var(--teal-900);
  --accent-highlight: var(--lime-500);
  --accent-highlight-hover: var(--lime-700);
  --focus-ring: var(--teal-700);

  /* ---------- Status ---------- */
  --status-positive: #3F6B4A;
  --status-positive-surface: #E4EDE4;
  --status-caution: #8A6410;
  --status-caution-surface: var(--lime-100);
  /* Summ's --red (#C0392B) is 4.0:1 on paper, below AA, and error text sits
     on paper often enough to matter. Two steps darker clears it on both
     grounds (4.9 paper, 5.8 white) and reads as the same red. */
  --status-critical: #A32F22;
  --status-critical-surface: #F9ECEC;       /* --red-soft */
  --status-info: var(--peri-700);
  --status-info-surface: var(--peri-100);

  /* ---------- Data viz (ordered) ---------- */
  /* One measure, one hue: length is the encoding. The first two carry text
     on the results bars, so both are dark enough for paper on top. */
  --data-1: var(--teal-700);   /* lava */
  --data-2: var(--sage-700);   /* moss-chart */
  --data-3: var(--peri-700);   /* muted blue-grey */
  --data-4: var(--apricot-700);
  --data-5: var(--teal-500);   /* moss-accessible */
  --data-6: var(--lime-700);   /* honey */
  --data-track: var(--cream-300);
}

/* ---- tokens/typography.css ---- */
:root {
  /* The Summ pairing, declared in globals.css and loaded on both hosts.
     --font-marcellus / --font-urbanist are the source of truth; these two
     names are what every Summ Base component references. */
  --font-logo: var(--font-marcellus, 'Marcellus', Georgia, serif);
  --font-heading: var(--font-marcellus, 'Marcellus', Georgia, serif);
  --font-body: var(--font-urbanist, 'Urbanist', system-ui, sans-serif);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Sizes — accessibility floor is 16px for body copy. */
  --text-display-xl: 72px;
  --text-display: 56px;
  --text-h1: 40px;
  --text-h2: 32px;
  --text-h3: 24px;
  --text-h4: 20px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-eyebrow: 12px;

  /* Marcellus is a serif with a taller x-height and less extreme descenders
     than Space Grotesk, so the tightest display leading is opened a little
     and the negative tracking is eased off: a serif set at -0.02em closes up
     at large sizes in a way a geometric sans does not. */
  --leading-tight: 1.12;
  --leading-snug: 1.22;
  --leading-heading: 1.3;
  --leading-body: 1.6;
  --leading-relaxed: 1.7;

  --tracking-logo: 0.01em;
  --tracking-display: -0.01em;
  --tracking-heading: -0.005em;
  --tracking-body: 0em;
  --tracking-eyebrow: 0.14em;
}

/* ---- tokens/spacing.css ---- */
:root {
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --gutter-mobile: 20px;
  --gutter-desktop: 40px;
  --container-max: 1200px;
  --measure-prose: 62ch;

  --control-height-sm: 36px;
  --control-height-md: 48px;
  --control-height-lg: 56px;
  --tap-target-min: 48px;
}

/* ---- tokens/effects.css ---- */
:root {
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-strong: 2px;

  /* Warm-tinted, low-spread. Never a grey/black shadow. */
  --shadow-xs: 0 1px 2px rgba(18, 41, 43, 0.05);
  --shadow-sm: 0 2px 6px rgba(18, 41, 43, 0.06);
  --shadow-md: 0 6px 18px rgba(18, 41, 43, 0.08);
  --shadow-lg: 0 16px 40px rgba(18, 41, 43, 0.10);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-shadow: 0 0 0 var(--focus-ring-width) rgba(111, 118, 214, 0.45);
}

/* ---- tokens/motion.css ---- */
:root {
  --duration-instant: 90ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;

  /* Gentle. Nothing in Haptiv snaps or bounces hard. */
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft-spring: cubic-bezier(0.34, 1.32, 0.64, 1);

  --lift-hover: -2px;
  --press-scale: 0.985;
}

/* ---- tokens/base.css ---- */
/* Haptiv base overrides. Loaded ONLY on the Haptiv host, so nothing here can
   affect Summ Nutrition. */

/* globals.css sets `body { overflow-x: hidden }`, which makes the body a
   scroll container and silently breaks `position: sticky` on every
   descendant — the nav stopped following the page down. `clip` prevents the
   same sideways scroll WITHOUT creating a scroll container, so sticky works
   again. `html body` outscores the `body` rule regardless of link order.
   globals.css is shared with the consumer site and is deliberately not
   edited. */
html body {
  overflow-x: clip;
  overflow-y: visible;
}