/* Chakra Serenity — design tokens. Single source of truth for colour, type
   and spacing. No component rules here.

   Design intent: quiet luxury. The failure mode of a wellness site is looking
   like a free template — flat white, one rainbow gradient, cramped type. The
   corrections are all here rather than in components:

     - the ground is a warm parchment, not white, and there are four surface
       levels so cards sit *in* the page rather than floating on it
     - type runs to 18px with a 1.75 measure, which is what makes long articles
       feel considered instead of dense
     - shadows are layered and nearly invisible; a single hard drop shadow is
       the fastest way to look cheap
     - chakra colour is signal, never decoration */

:root {
  /* ---- Ground & surfaces ---- */
  --cs-bg:            #FAF7F2;   /* warm parchment */
  --cs-bg-deep:       #F2ECE2;   /* alternating section band */
  --cs-surface:       #FFFDFA;   /* cards — a hair warm, never pure white */
  --cs-surface-alt:   #F5F0E7;
  --cs-surface-sunk:  #EBE4D8;

  /* Ink on a dark ground, for the footer and CTA bands. */
  --cs-night:         #191526;
  --cs-night-soft:    #241E35;
  --cs-night-line:    #332A48;

  /* ---- Ink ---- */
  --cs-ink:           #1E1A2B;
  --cs-ink-soft:      #453E57;
  --cs-ink-muted:     #756D86;
  --cs-ink-faint:     #A79FB4;

  /* ---- Accent ---- */
  --cs-accent:        #4A3B6B;
  --cs-accent-mid:    #6A5691;
  --cs-accent-dark:   #2F2547;
  --cs-accent-tint:   #EDE8F5;
  --cs-accent-wash:   #F6F3FA;

  /* Gold is reserved for value signals — price, rating, "best" badges. Used
     anywhere else it stops meaning anything. */
  --cs-gold:          #A67C3D;
  --cs-gold-light:    #C9A461;
  --cs-gold-dark:     #7E5C29;
  --cs-gold-tint:     #F7F0E2;

  --cs-link:          #4A3B6B;
  --cs-link-hover:    #2F2547;

  /* Text colour to use ON a dark/accent background. Named semantically on
     purpose: a hardcoded #fff is the classic route to invisible button text
     after a later override. */
  --cs-on-accent:     #FFFFFF;
  --cs-on-night:      #EFEAF7;

  --cs-border:        #E7E0D4;
  --cs-border-soft:   #F0EAE0;
  --cs-border-strong: #D6CCBC;
  --cs-focus:         #6A5691;

  /* ---- The seven chakras ----
     Muted one step from the pure spectrum so they sit on a warm ground without
     vibrating. Each has a -soft companion for fills and rules. */
  --cs-root:      #B04A3C;  --cs-root-soft:      #F7E8E5;
  --cs-sacral:    #CE7431;  --cs-sacral-soft:    #FBEEE2;
  --cs-solar:     #C09A28;  --cs-solar-soft:     #FAF4DE;
  --cs-heart:     #47875A;  --cs-heart-soft:     #E6F0E8;
  --cs-throat:    #37789C;  --cs-throat-soft:    #E4EEF4;
  --cs-thirdeye:  #423E86;  --cs-thirdeye-soft:  #E8E7F3;
  --cs-crown:     #77559F;  --cs-crown-soft:     #F0EAF6;

  /* ---- Typography ----
     Fraunces and Inter load with display=swap behind a preconnect, with a full
     local fallback stack. Nothing below depends on the webfont having loaded. */
  --cs-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --cs-font-body:    "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --cs-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --cs-fs-micro:     0.75rem;     /* 12 */
  --cs-fs-kicker:    0.8125rem;   /* 13 */
  --cs-fs-small:     0.9375rem;   /* 15 */
  --cs-fs-body:      1.125rem;    /* 18 — long-form comfortable */
  --cs-fs-lead:      1.3125rem;   /* 21 */
  --cs-fs-h4:        1.1875rem;
  --cs-fs-h3:        1.4375rem;
  --cs-fs-h2:        1.875rem;
  --cs-fs-h1:        2.375rem;
  --cs-fs-display:   2.875rem;

  --cs-lh-tight:     1.14;
  --cs-lh-heading:   1.28;
  --cs-lh-body:      1.75;

  --cs-ls-kicker:    0.09em;
  --cs-ls-display:   -0.022em;

  /* ---- Spacing ---- */
  --cs-s1:  0.25rem;  --cs-s2:  0.5rem;   --cs-s3:  0.75rem;
  --cs-s4:  1rem;     --cs-s5:  1.5rem;   --cs-s6:  2rem;
  --cs-s7:  3rem;     --cs-s8:  4.5rem;   --cs-s9:  6.5rem;

  /* ---- Layout ---- */
  --cs-wrap:         1200px;
  --cs-wrap-narrow:  740px;       /* article measure */
  --cs-gutter:       1.25rem;

  /* ---- Shape & elevation ----
     Layered, low-opacity shadows. Cheap themes use one 10px black blur. */
  --cs-radius-sm:    8px;
  --cs-radius:       14px;
  --cs-radius-lg:    22px;
  --cs-radius-pill:  100px;

  --cs-shadow-xs: 0 1px 2px rgba(30, 26, 43, 0.04);
  --cs-shadow-sm: 0 1px 2px rgba(30, 26, 43, 0.04), 0 2px 6px rgba(30, 26, 43, 0.04);
  --cs-shadow:    0 1px 2px rgba(30, 26, 43, 0.04), 0 4px 14px rgba(30, 26, 43, 0.06);
  --cs-shadow-lg: 0 2px 4px rgba(30, 26, 43, 0.05), 0 12px 34px rgba(30, 26, 43, 0.09);
  --cs-shadow-xl: 0 4px 8px rgba(30, 26, 43, 0.06), 0 24px 60px rgba(30, 26, 43, 0.12);

  --cs-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --cs-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --cs-transition: 200ms var(--cs-ease);
}

@media (min-width: 48rem) {
  :root {
    --cs-fs-h1:      3rem;
    --cs-fs-h2:      2.125rem;
    --cs-fs-display: 4rem;
    --cs-gutter:     2rem;
  }
}

@media (min-width: 75rem) {
  :root { --cs-fs-display: 4.5rem; }
}

/* Respect the reader. Anyone who has asked their OS for less motion gets none —
   the music player's pulse in particular is exactly the kind of thing that
   triggers vestibular discomfort. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}