/* Kidzoo Kids palette. Loaded by CatalogLayout before every page stylesheet. */
:root {
  /* Brand hues: blue leads, orange and gold punctuate. Teal and green belong to illustrated values. */
  --color-teal: #126b69;
  --color-gold: #f4c522;
  --color-orange: #df582f;
  --color-orange-action: #ed5020;
  --color-orange-action-hover: #f15a2a;
  --color-cobalt: #244ca4;
  --color-green: #39702c;
  --color-purple: #693d80;

  /* Tonal steps for the painted sky and readable actions. */
  --color-navy: #173e80;
  --color-sky: #285caf;
  --color-azure: #176ca8;
  --color-azure-deep: #155988;
  --color-teal-deep: #184d49;
  --color-orange-deep: #b9491d;
  --color-orange-hover: #9e421f;

  /* Supporting neutrals and readable foregrounds. */
  --color-ink: #243653;
  --color-paper: #f7faff;
  --color-paper-warm: #ffffff;
  --color-ivory: #fff9e9;
  --color-white: #fff;
  --color-pale-sky: #e8f3fb;
  --color-mint: var(--color-pale-sky);
  --color-peach: #f6e3c5;
  --color-sky-mist: #dcebf0;
  --color-purple-mist: #e5dff1;
  --color-gold-soft: #f7cf75;
  --color-ink-on-gold: #243653;
  --color-ink-on-orange: #29180f;
  --color-on-orange-action: var(--color-white);
  --color-sage: #b8ccab;
  --color-border: #d6e2f0;
  --color-border-sky: #aac9df;
  --color-border-mint: var(--color-border-sky);
  --color-border-warm: #d7b8a0;
  --color-print-ink: #202820;
  --color-print-border: #888;
  --color-print-black: #000;

  /* Semantic roles: always pair a value background with its foreground. */
  --color-text-muted: #4d5e78;
  --color-border-on-dark: color-mix(in srgb, var(--color-ivory) 40%, transparent);
  --color-text: var(--color-ink);
  --color-background: var(--color-paper);
  --color-connect: var(--color-teal);
  --color-on-connect: var(--color-ivory);
  --color-wonder: var(--color-gold);
  --color-on-wonder: var(--color-ink-on-gold);
  --color-good: var(--color-orange);
  --color-on-good: var(--color-ink-on-orange);
  --color-believe: var(--color-cobalt);
  --color-on-believe: var(--color-ivory);
  --color-strive: var(--color-green);
  --color-on-strive: var(--color-ivory);
  --color-passion: var(--color-purple);
  --color-on-passion: var(--color-ivory);

  /* Shared type roles. Fredoka carries headings; DM Sans carries reading and UI text. */
  --font-body: 'DM Sans', sans-serif;
  --font-display: Fredoka, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --type-art-caption: 9px;
  --type-micro: 10px;
  --type-tiny: 11px;
  --type-label: 12px;
  --type-meta: 13px;
  --type-small: 14px;
  --type-body: 16px;
  --type-body-large: 18px;
  --type-lead: 20px;
  --type-action: 19px; /* White on painted orange needs bold, large text. */
  --type-note-title: 24px;
  --type-card-title: 28px;
  --type-subheading: 36px;
  --type-series-title: clamp(28px, 2.8vw, 43px);
  --type-value-title: clamp(30px, 8.5cqw, 56px);
  --type-value-copy: clamp(17px, 4.4cqw, 25px);
  --type-feature-number: 55px;
  --type-section: clamp(36px, 4vw, 56px);
  --type-page: clamp(48px, 5.4vw, 78px);
  --type-display: clamp(50px, 5vw, 76px);
  --leading-tight: 1.08;
  --leading-heading: 1.17;
  --leading-body: 1.6;
  --leading-relaxed: 1.7;

  /* Action aliases retain the existing selectors' API. */
  --cta-font-size: var(--type-action);
  --cta-font-size-utility: var(--type-body);
  --cta-font-weight: var(--weight-bold);
  --cta-line-height: 1.25;
  --cta-gap: 18px;

  /* Compatibility with the existing site stylesheet. */
  --pine: var(--color-text);
  --cream: var(--color-background);
  --leaf: var(--color-sage);
  --line: var(--color-border);
}

@media (max-width: 760px) {
  :root {
    --type-lead: 18px;
    --type-page: clamp(44px, 10vw, 64px);
    --type-display: clamp(44px, 11vw, 64px);
    --type-section: clamp(36px, 7vw, 52px);
  }
}