/* Hallmark · tokens · Phòng khám Nhi khoa Cánh Diều
 * theme: custom (tuned) · vibe: "crayon warmth, navy ink, kite rainbow"
 * axes: light / geometric-sans / warm
 * Palette derived from the brand logo: cream paper, navy outline ink, crayon-rainbow ribbon set.
 */

:root {
  /* ── Paper ──────────────────────────────────────────────── */
  --color-paper:      oklch(96.5% 0.012 85);   /* cream, matches the logo ground */
  --color-paper-2:    oklch(93.5% 0.016 85);   /* one elevation step            */
  --color-paper-3:    oklch(90%   0.020 82);   /* two steps — quiet bands       */

  /* ── Ink (navy family, from the logo outline) ───────────── */
  --color-ink:        oklch(28%   0.052 250);
  --color-ink-2:      oklch(42%   0.042 250);
  --color-muted:      oklch(46%   0.030 250);
  --color-navy:       oklch(38%   0.082 250);  /* the logo's drawn-outline navy */

  /* ── Rules ──────────────────────────────────────────────── */
  --color-rule:       oklch(84%   0.020 250);  /* decorative dividers only     */
  --color-rule-2:     oklch(89%   0.014 250);
  /* Boundaries of interactive controls (inputs, selects, the menu button).
     WCAG 1.4.11 wants 3:1 for a control's visual boundary; --color-rule is
     1.47:1 on paper and 1.21:1 on paper-3, which is a hairline, not an edge. */
  --color-rule-strong: oklch(58%  0.030 250);  /* 3.86:1 paper · 3.17:1 paper-3 */

  /* ── Accent (single signal — the kite's coral) ──────────── */
  --color-accent:      oklch(64%  0.170 35);   /* decorative only: underlines, strokes */
  --color-accent-deep: oklch(50%  0.160 33);   /* fills + display numerals (4.5:1)     */
  --color-accent-soft: oklch(92%  0.045 45);   /* tint wash                            */
  --color-accent-ink:  var(--color-paper);     /* text on accent-deep                  */
  --color-focus:       oklch(56%  0.200 33);

  /* ── Ribbon set — the crayon rainbow, illustration + markers only ── */
  --color-ribbon-red:   oklch(63% 0.190  28);
  --color-ribbon-amber: oklch(80% 0.150  80);
  --color-ribbon-green: oklch(68% 0.160 148);
  --color-ribbon-sky:   oklch(70% 0.130 215);
  --color-ribbon-plum:  oklch(58% 0.170 330);

  /* ── Status ─────────────────────────────────────────────── */
  /* error sits on --color-paper-3 (the .book surface): at L 52% it measured
     4.48:1, a hair under the 4.5:1 floor. L 49% clears it at 5.12:1. */
  --color-error:      oklch(49% 0.185 25);
  --color-error-wash: oklch(96% 0.028 25);
  --color-success:    oklch(48% 0.120 150);
  --color-overlay-hi: oklch(96.5% 0.012 85 / 0.16);  /* hover wash on the navy banner */

  /* ── Type ───────────────────────────────────────────────── */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;

  --text-xs:      0.8rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-md:      1.125rem;
  --text-lg:      1.375rem;
  --text-xl:      1.75rem;
  --text-2xl:     2.1875rem;
  --text-3xl:     2.75rem;
  --text-display:   clamp(2.5rem, 4.5vw + 1rem, 4.5rem);
  --text-display-s: clamp(2rem, 3vw + 1rem, 3.25rem);
  --text-numeral:   clamp(3.25rem, 7vw, 5.5rem);

  /* ── Space — 4pt scale ──────────────────────────────────── */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --page-gutter: clamp(1.125rem, 4vw, 3.5rem);
  --measure: 62ch;

  /* ── Rules / radii ──────────────────────────────────────── */
  --rule-hair:  1px;
  --rule-bold:  2px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-pill: 999px;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* ── Z ──────────────────────────────────────────────────── */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}