/* Hallmark · design tokens · theme: Hum (playful)
 * Cream paper, multi-accent (pear / cyan / coral), rounded sans.
 * Every colour + font in the build references a token here by name.
 * Axes - paper-band: light · display-style: rounded-sans · accent-hue: multi
 */

:root {
  /* - Paper & ink (never pure white / pure black) - */
  --color-paper:    oklch(97% 0.012 95);   /* cream, slight pear pull */
  --color-paper-2:  oklch(94% 0.016 95);   /* tinted band */
  --color-paper-3:  oklch(91% 0.020 95);   /* deeper hover */
  --color-ink:      oklch(22% 0.012 250);  /* near-black, cool tilt */
  --color-ink-2:    oklch(42% 0.016 250);  /* muted label ink */
  --color-muted:    oklch(46% 0.018 250);  /* secondary text (≥4.5:1 on cream) */

  /* - Accents (each owns its own surface; never blended in gradients) - */
  --color-accent:       oklch(86% 0.18 95);   /* pear - primary action */
  --color-accent-deep:  oklch(74% 0.20 95);   /* pear button edge */
  --color-accent-2:     oklch(66% 0.18 235);  /* sky-cyan - links / hover tint */
  --color-accent-3:     oklch(64% 0.23 18);   /* coral - the one high-energy moment */
  --color-accent-3-deep:oklch(52% 0.20 18);   /* coral-deep - badge text */
  --color-mint:         oklch(78% 0.15 150);  /* used sparingly */
  --color-lavender:     oklch(72% 0.15 305);  /* used sparingly */

  /* - Card tint fills (very low opacity of each accent) - */
  --tint-pear:     oklch(86% 0.18 95  / 0.10);
  --tint-cyan:     oklch(66% 0.18 235 / 0.10);
  --tint-coral:    oklch(64% 0.23 18  / 0.10);
  --tint-mint:     oklch(78% 0.15 150 / 0.12);
  --tint-lavender: oklch(72% 0.15 305 / 0.12);
  --tint-ink:      oklch(22% 0.012 250 / 0.05);

  /* - Rules / borders - */
  --color-rule:    oklch(88% 0.012 95);
  --color-rule-2:  oklch(80% 0.016 95);
  --color-focus:   oklch(60% 0.19 235);   /* cyan focus ring */

  /* - Shadow casts (ink-derived, at alpha) - */
  --color-shadow-sm: oklch(22% 0.012 250 / 0.14);
  --color-shadow-md: oklch(22% 0.012 250 / 0.22);
  --color-shadow-lg: oklch(22% 0.012 250 / 0.32);
  --color-shadow-xl: oklch(22% 0.012 250 / 0.50);
  --color-scrim:     oklch(22% 0.012 250 / 0.35);
  --color-cast-pear:  oklch(74% 0.20 95  / 0.40);
  --color-hl-pear:    oklch(86% 0.18 95  / 0.55);
  --color-hl-cyan:    oklch(66% 0.18 235 / 0.45);
  --color-hl-coral:   oklch(64% 0.23 18  / 0.42);
  --stencil:          oklch(0% 0 0);   /* mask stencil (opaque) - not a visible hue */

  /* - Inline SVG icon (search) used as a mask - */
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");

  /* - Type families - */
  --font-display: "Plus Jakarta Sans", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-label:   "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* - Type scale - */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --text-display-s: clamp(2.4rem, 1.6rem + 3.4vw, 3.5rem);
  --text-display:   clamp(3rem, 2rem + 4.5vw, 4.75rem);

  /* - Spacing (4pt scale) - */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* - Radii (rounded theme - no square corners anywhere) - */
  --radius-sm:    8px;
  --radius-input: 12px;
  --radius-card:  20px;
  --radius-pill:  999px;

  /* - Rules - */
  --rule-hair: 1px;

  /* - Easings - */
  --ease-out:    cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in:     cubic-bezier(0.32, 0, 0.67, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* Hum canonical */
  --ease-snap:   cubic-bezier(0.22, 1, 0.36, 1);     /* tick-ups / reveals */

  /* - Durations - */
  --dur-instant: 100ms;
  --dur-short:   160ms;
  --dur-mid:     240ms;
  --dur-long:    600ms;

  /* - Elevation (z-index, six named levels - never 9999) - */
  --z-base:   1;
  --z-raised: 10;
  --z-nav:    100;
  --z-overlay:600;
  --z-modal:  700;
  --z-top:    900;

  /* - Layout shell - */
  --page-max:     72rem;
  --page-gutter:  clamp(1rem, 4vw, 2.5rem);
  --section-gap:  clamp(3rem, 5vw + 1.5rem, 6rem);
}