/* ============================================================
   KAHANI KORNER — Design Tokens (single source of truth)
   Load this FIRST in <head>, before navbar.css, common.css,
   or any page's own <style> block. Every other stylesheet on
   the site consumes these custom properties instead of
   redeclaring its own :root.
   ============================================================ */

:root {
  /* ── Brand palette ── */
  --deep-teal: #2e6a68;
  --sage-green: #9eaf8b;
  --light-sage: #dadebb;
  --dusty-blush: #e9c7cf;
  --pale-rose: #f6e3e7;
  --rose-pink: #e19697;
  --rose-pink-hover: #d68588;
  --rose-pink-active: #c9787c;
  --warm-white: #fffdf8;
  --charcoal: #1f2928;
  --muted-gray: #52615d;
  --light-neutral: #e8e4dc;

  /* ── Semantic aliases ── */
  --color-teal: var(--deep-teal);
  --color-teal-dark: #234f4d;
  --color-cream: #faf7f0;
  --color-text: var(--charcoal);
  --color-text-muted: var(--muted-gray);
  --color-border: var(--light-neutral);
  --danger: #b23b3b;

  --color-sage-light: var(--light-sage);
  --color-sage-muted: var(--sage-green);
  --color-warm-white: var(--warm-white);

  /* ── Shape & elevation ── */
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --radius: 1.5rem;
  --shadow-soft: 0 18px 40px rgba(46, 106, 104, 0.14);
  --shadow-hover: 0 22px 50px rgba(46, 106, 104, 0.22);
  --card-bg: var(--color-warm-white);

  /* ── Layout metrics ── */
  --topbar-h: 15px;
  --header-h: 74px;
  --header-top-gap: 1.75rem;

  /* ── Type scale ── */
  --h2: clamp(1.85rem, 3.6vw, 2.3rem);
  --h3: 1.15rem;

  /* ── Raw brand tokens (legacy --kk-* names some stylesheets still use) ── */
  --kk-cream: var(--color-cream);
  --kk-ivory: var(--warm-white);
  --kk-off-white: var(--light-neutral);
  --kk-text-dark: var(--charcoal);
  --kk-mint: #daeae3;
  --kk-mint-light: var(--light-neutral);
  --kk-sage-light: var(--light-sage);
  --kk-sage: var(--sage-green);
  --kk-teal-dark: var(--deep-teal);
  --kk-teal: var(--muted-gray);
  --kk-rose: var(--rose-pink-hover);
  --kk-coral: var(--rose-pink);
  --kk-salmon: var(--rose-pink-active);
  --kk-blush: var(--dusty-blush);
  --kk-pink-light: var(--pale-rose);
  --kk-teal-shadow: var(--color-teal-dark);
  --kk-coral-shadow: #6e3537;

  /* ── Legacy alias layer #1 (assets/css/navbar.css naming) ── */
  --granite: var(--color-text);
  --ash-grey: var(--color-sage-muted);
  --white-smoke: var(--color-warm-white);
  --soft-blush: var(--pale-rose);
  --cotton-rose: var(--dusty-blush);
  --rosy-taupe: var(--rose-pink);
  --black: var(--color-text);
  --white: var(--color-warm-white);
  --mint: var(--kk-mint);
  --green: var(--sage-green);
  --pink: var(--rose-pink);
  --muted: var(--color-text-muted);

  /* ── Legacy alias layer #2 (quicklinks/SharedCSS/common.css naming) ── */
  --feldgrau: var(--charcoal);
  --hookers-green: var(--deep-teal);
  --ash-gray: var(--color-sage-muted);
  --misty-rose: var(--pale-rose);
  --tea-rose: var(--dusty-blush);
  --rosy-brown: var(--rose-pink);
}
