/* PackPerfect theme. Values come from packperfect/design-system/tokens.css (Ink, Harbor).
   Satoshi and Cabinet Grotesk are not bundled yet, so the fallback stacks apply. */
:root {
  /* Surfaces and text */
  --surface: #faf8f3;
  --surface-raised: #fffdf8;
  --text: #26231c;
  --text-muted: #6d675b;
  --line: #e8e3d6;
  --line-strong: #78715f;
  --focus: #2f7488;

  /* Links and the primary button */
  --accent: #164654;
  --action: #164654;
  --on-action: #eef6f4;

  /* Hero band */
  --hero-bg: #164654;
  --hero-text: #eef6f4;
  --hero-action: #fffdf8;
  --on-hero-action: #113540;

  /* Type */
  --font-heading: "Cabinet Grotesk", "Avenir Next", system-ui, sans-serif;
  --font-body: "Satoshi", "Helvetica Neue", system-ui, sans-serif;
  --heading-weight: 800;

  /* Status (always paired with an icon or text) */
  --success: #3c6f31;
  --success-soft: #e2ecdc;
  --error: #93333f;
  --error-soft: #f6dde0;
  --attention: #8a5d13;
  --attention-soft: #f2e6cd;
  --track: #e8e3d6;

  /* Tuck */
  --illustration-body: #2f7488;
  --illustration-band: #d9b878;
  --illustration-outline: #26231c;
  --illustration-eye: #fffdf8;
  --illustration-blush: #e3a3ab;
  --illustration-accent: #5896aa;
  --illustration-pupil: #26231c;
  --illustration-shine: rgb(255 253 248 / 0.38);
  --illustration-ground: rgb(38 35 28 / 0.12);

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

/* Dark applies on screen only, so a printed page is always light. */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --surface: #16130e;
    --surface-raised: #1e1a14;
    --text: #e6e1d2;
    --text-muted: #a89f8c;
    --line: #2d2820;
    --line-strong: #8a8371;
    --focus: #8ab9c8;

    --accent: #8ab9c8;
    --action: #8ab9c8;
    --on-action: #0d252d;

    --hero-bg: #113540;
    --hero-text: #e6e1d2;
    --hero-action: #8ab9c8;
    --on-hero-action: #0d252d;

    --success: #9ec48f;
    --success-soft: #232d1e;
    --error: #e3a3ab;
    --error-soft: #38211f;
    --attention: #d9b878;
    --attention-soft: #322a19;
    --track: #2d2820;

    --illustration-body: #1d5a6d;
    --illustration-band: #d9b878;
    --illustration-outline: #e6e1d2;
    --illustration-eye: #f3f0e7;
    --illustration-blush: #e3a3ab;
    --illustration-accent: #8ab9c8;
    --illustration-pupil: #16130e;
    --illustration-shine: rgb(255 253 248 / 0.2);
    --illustration-ground: rgb(255 253 248 / 0.1);
  }
}

/* Paper: white, with darker greys so lines and boxes survive a printer. */
@media print {
  :root {
    --surface: #fff;
    --surface-raised: #fff;
    --text: #000;
    --text-muted: #3d3a33;
    --line: #b9b3a5;
    --line-strong: #4a463d;
    --attention: #5c3d0a;
  }
}