/*
 * Charlotte Vitamins & Health design foundation
 *
 * This file is the canonical token and primitive layer. It intentionally loads
 * before the existing route styles so finished pages retain their approved
 * compositions while new work can opt in through the cvh-* classes or data
 * attributes below.
 */

:root {
  color-scheme: light;

  /* Brand and semantic palette */
  --cvh-forest-950: #0d2e22;
  --cvh-forest-900: #12372a;
  --cvh-forest-800: #174733;
  --cvh-forest-700: #1d5a43;
  --cvh-ink: #183229;
  --cvh-muted: #52685b;
  --cvh-subtle: #617368;
  --cvh-canvas: #f5f0e4;
  --cvh-cream: #fffaf1;
  --cvh-paper: #fffdf8;
  --cvh-raised: #fff;
  --cvh-linen: #f7f0e2;
  --cvh-mint: #edf5e8;
  --cvh-sage-100: #e5efe0;
  --cvh-sage-200: #d2e3ca;
  --cvh-border-soft: #d8e2d5;
  --cvh-border: #c6d4c3;
  --cvh-border-strong: #96ae98;
  --cvh-structural-accent: #174733;
  --cvh-rule-accent: #718c74;
  --cvh-warm-detail: #8f472e;
  --cvh-city-sun: #ffd100;
  --cvh-city-sun-hover: #ffdc35;
  --cvh-city-sun-pressed: #f0c000;
  --cvh-city-sun-edge: #b95124;
  --cvh-clay: var(--cvh-warm-detail);
  --cvh-wine: #703a56;
  --cvh-danger: #934331;
  --cvh-danger-hover: #7f382a;
  --cvh-danger-edge: #672b20;
  --cvh-disabled-surface: #dfe4dd;
  --cvh-disabled-ink: #5d675f;

  /* Only these radii are approved for new shared UI. */
  --cvh-radius-0: 0;
  --cvh-radius-6: 6px;
  --cvh-radius-12: 12px;
  --cvh-radius-14: 14px;
  --cvh-radius-pill: 999px;

  /* One ordinary rule and one architectural rule. */
  --cvh-border-width-1: 1px;
  --cvh-border-width-2: 2px;

  /* Shadows are reserved for raised surfaces and physical actions. */
  --cvh-shadow-1: 0 8px 20px rgba(18, 55, 42, .08);
  --cvh-shadow-2: 0 16px 34px rgba(18, 55, 42, .13);

  /* Shared interaction contract */
  --cvh-control-min-height: 44px;
  --cvh-focus-outline: 3px solid var(--cvh-forest-900);
  --cvh-focus-offset: 3px;
  --cvh-focus-shadow: 0 0 0 6px var(--cvh-city-sun);
  --cvh-motion-fast: 150ms;
  --cvh-motion-base: 210ms;
  --cvh-ease-standard: cubic-bezier(.2, .72, .25, 1);

  /* Typography */
  --cvh-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cvh-font-serif: Georgia, "Times New Roman", serif;
}

/*
 * Canonical buttons
 *
 * Class API: .cvh-button .cvh-button--primary
 * Attribute API: data-cvh-button="primary"
 */
:where(.cvh-button, [data-cvh-button]) {
  display: inline-flex;
  min-width: 0;
  min-height: var(--cvh-control-min-height);
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: var(--cvh-border-width-1) solid transparent;
  border-radius: var(--cvh-radius-12);
  font-family: var(--cvh-font-sans);
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--cvh-motion-fast) ease,
    border-color var(--cvh-motion-fast) ease,
    background-color var(--cvh-motion-fast) ease,
    box-shadow var(--cvh-motion-fast) ease,
    transform var(--cvh-motion-fast) var(--cvh-ease-standard);
}

:where(.cvh-button, [data-cvh-button]):focus-visible {
  outline: var(--cvh-focus-outline);
  outline-offset: var(--cvh-focus-offset);
  box-shadow: var(--cvh-focus-shadow);
}

:is(.cvh-button--primary, [data-cvh-button="primary"]) {
  border-color: var(--cvh-forest-900);
  color: var(--cvh-paper);
  background: var(--cvh-forest-800);
}

:is(.cvh-button--primary, [data-cvh-button="primary"]):hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--cvh-forest-700);
}

:is(.cvh-button--primary, [data-cvh-button="primary"]):active:not(:disabled, [aria-disabled="true"]) {
  background: var(--cvh-forest-950);
  transform: translateY(1px);
}

:is(.cvh-button--secondary, [data-cvh-button="secondary"]) {
  border-color: var(--cvh-border-strong);
  color: var(--cvh-forest-900);
  background: var(--cvh-paper);
}

:is(.cvh-button--secondary, [data-cvh-button="secondary"]):hover:not(:disabled, [aria-disabled="true"]) {
  border-color: var(--cvh-forest-700);
  background: var(--cvh-sage-100);
}

:is(.cvh-button--sun-action, [data-cvh-button="sun-action"]) {
  border-color: var(--cvh-city-sun-edge);
  border-radius: var(--cvh-radius-12) var(--cvh-radius-12) var(--cvh-radius-6) var(--cvh-radius-12);
  color: var(--cvh-forest-900);
  background: var(--cvh-city-sun);
  box-shadow:
    0 4px 0 var(--cvh-city-sun-edge),
    var(--cvh-shadow-1),
    inset 0 1px 0 rgba(255, 248, 220, .82);
}

:is(.cvh-button--sun-action, [data-cvh-button="sun-action"]):hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--cvh-city-sun-hover);
  box-shadow:
    0 6px 0 var(--cvh-city-sun-edge),
    var(--cvh-shadow-2),
    inset 0 1px 0 rgba(255, 248, 220, .9);
  transform: translateY(-2px);
}

:is(.cvh-button--sun-action, [data-cvh-button="sun-action"]):active:not(:disabled, [aria-disabled="true"]) {
  background: var(--cvh-city-sun-pressed);
  box-shadow:
    0 1px 0 var(--cvh-city-sun-edge),
    0 3px 7px rgba(23, 61, 45, .14),
    inset 0 1px 0 rgba(255, 248, 220, .72);
  transform: translateY(3px);
}

:is(.cvh-button--text-link, [data-cvh-button="text-link"]) {
  justify-content: flex-start;
  padding-inline: 0;
  border-color: transparent;
  border-radius: var(--cvh-radius-0);
  color: var(--cvh-forest-800);
  background: transparent;
  text-decoration: underline;
  text-decoration-color: var(--cvh-rule-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

:is(.cvh-button--text-link, [data-cvh-button="text-link"]):hover:not(:disabled, [aria-disabled="true"]) {
  color: var(--cvh-forest-700);
  text-decoration-color: currentColor;
}

:is(.cvh-button--danger, [data-cvh-button="danger"]) {
  border-color: var(--cvh-danger-edge);
  color: #fff;
  background: var(--cvh-danger);
}

:is(.cvh-button--danger, [data-cvh-button="danger"]):hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--cvh-danger-hover);
}

:is(.cvh-button--icon, [data-cvh-button="icon"]) {
  width: var(--cvh-control-min-height);
  flex: 0 0 var(--cvh-control-min-height);
  padding: 0;
  border-color: var(--cvh-border);
  color: var(--cvh-forest-900);
  background: var(--cvh-paper);
}

:is(.cvh-button--icon, [data-cvh-button="icon"]):hover:not(:disabled, [aria-disabled="true"]) {
  border-color: var(--cvh-forest-700);
  background: var(--cvh-sage-100);
}

:is(.cvh-button--icon, [data-cvh-button="icon"]) > :is(svg, img) {
  width: 20px;
  height: 20px;
}

:is(.cvh-button, [data-cvh-button]):is(:disabled, [aria-disabled="true"]) {
  border-color: var(--cvh-border);
  color: var(--cvh-disabled-ink);
  background: var(--cvh-disabled-surface);
  box-shadow: none;
  cursor: not-allowed;
  opacity: .72;
  transform: none;
}

/* Named surfaces: ordinary panel, raised panel, quiet inset, and architecture. */
:where(.cvh-surface, [data-cvh-surface]) {
  min-width: 0;
  color: var(--cvh-ink);
}

:where(.cvh-surface--canvas, [data-cvh-surface="canvas"]) {
  border-radius: var(--cvh-radius-0);
  background: var(--cvh-canvas);
}

:where(.cvh-surface--paper, [data-cvh-surface="paper"]) {
  border: var(--cvh-border-width-1) solid var(--cvh-border);
  border-radius: var(--cvh-radius-14);
  background: var(--cvh-paper);
}

:where(.cvh-surface--raised, [data-cvh-surface="raised"]) {
  border: var(--cvh-border-width-1) solid var(--cvh-border);
  border-radius: var(--cvh-radius-14);
  background: var(--cvh-raised);
  box-shadow: var(--cvh-shadow-1);
}

:where(.cvh-surface--quiet, [data-cvh-surface="quiet"]) {
  border: var(--cvh-border-width-1) solid var(--cvh-border-soft);
  border-radius: var(--cvh-radius-12);
  background: var(--cvh-sage-100);
}

:where(.cvh-surface--detail, [data-cvh-surface="detail"]) {
  border: var(--cvh-border-width-1) solid var(--cvh-border);
  border-radius: var(--cvh-radius-6);
  background: var(--cvh-paper);
}

:where(.cvh-surface--architectural, [data-cvh-surface="architectural"]) {
  border: var(--cvh-border-width-2) solid var(--cvh-forest-900);
  border-radius: var(--cvh-radius-0);
  background: var(--cvh-paper);
  box-shadow: inset 0 0 0 var(--cvh-border-width-1) var(--cvh-rule-accent);
}

/*
 * Contextual service module
 *
 * This is an information-and-actions row, not a generic icon card. Use the
 * title to name the exact customer task and keep actions to the minimum needed.
 */
:where(.cvh-service-module, [data-cvh-service]) {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px clamp(20px, 4vw, 48px);
  padding: clamp(20px, 3vw, 30px);
  border: var(--cvh-border-width-1) solid var(--cvh-border);
  border-top: var(--cvh-border-width-2) solid var(--cvh-rule-accent);
  border-radius: var(--cvh-radius-0);
  color: var(--cvh-ink);
  background: var(--cvh-paper);
}

:where(.cvh-service-module--forest, [data-cvh-service="forest"]) {
  border-color: var(--cvh-forest-700);
  border-top-color: var(--cvh-rule-accent);
  color: var(--cvh-paper);
  background: var(--cvh-forest-900);
}

:where(.cvh-service-module__copy) {
  min-width: 0;
}

:where(.cvh-service-module__kicker) {
  margin: 0 0 6px;
  color: var(--cvh-forest-700);
  font-family: var(--cvh-font-sans);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

:where(.cvh-service-module--forest, [data-cvh-service="forest"]) :where(.cvh-service-module__kicker) {
  color: var(--cvh-sage-200);
}

:where(.cvh-service-module__title) {
  margin: 0;
  color: inherit;
  font-family: var(--cvh-font-serif);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.08;
}

:where(.cvh-service-module__body) {
  max-width: 62ch;
  margin: 7px 0 0;
  color: var(--cvh-muted);
  font-family: var(--cvh-font-sans);
  font-size: .9rem;
  line-height: 1.55;
}

:where(.cvh-service-module--forest, [data-cvh-service="forest"]) :where(.cvh-service-module__body) {
  color: #dce9df;
}

:where(.cvh-service-module__actions) {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 620px) {
  :where(.cvh-service-module, [data-cvh-service]) {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.cvh-service-module__actions) {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.cvh-button, [data-cvh-button]) {
    transition: none;
  }

  :where(.cvh-button, [data-cvh-button]):is(:hover, :active) {
    transform: none;
  }
}

@media (forced-colors: active) {
  :where(.cvh-button, [data-cvh-button]),
  :where(.cvh-surface, [data-cvh-surface]),
  :where(.cvh-service-module, [data-cvh-service]) {
    border: var(--cvh-border-width-2) solid CanvasText;
    box-shadow: none;
    forced-color-adjust: auto;
  }

  :where(.cvh-button, [data-cvh-button]):focus-visible {
    outline: var(--cvh-border-width-2) solid Highlight;
    box-shadow: none;
  }
}