/* ==========================================================================
   Cent Care - Design Tokens
   Single source of truth for the visual system.
   Derived from Cent Care Brand Guidelines v1.0.
   Change a value here and it updates everywhere on the site.
   ========================================================================== */

:root {
  /* ---- Brand colour ---- */
  --purple:        #3D1852;   /* Cent Purple, primary */
  --purple-deep:   #2A0F38;   /* Deep Purple, dark sections and footers */
  --purple-mid:    #5C2E7E;   /* Mid Purple, borders on dark backgrounds, accents */
  --gold:          #C9A227;   /* Centurion Gold, accent, single CTA */
  --gold-light:    #E4C766;   /* Gold on dark backgrounds */
  --gold-dark:     #8F7318;   /* Gold text on light backgrounds */

  /* ---- Neutrals ---- */
  --lilac:         #EFEAF4;   /* tinted surface */
  --off-white:     #F7F5F9;   /* page alternate background */
  --mist:          #E0DCE6;   /* hairlines, borders */
  --ink:           #141416;   /* body text */
  --slate:         #5F5F66;   /* secondary text */
  --white:         #FFFFFF;

  /* ---- Semantic (product/status use only, never decorative) ---- */
  --status-stable: #1F7A4D;
  --status-watch:  #C9862A;
  --status-act:    #A32D2D;

  /* ---- Typography ---- */
  --font-display: 'Poppins', 'Montserrat', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-bengali: 'Noto Sans Bengali', var(--font-body);

  /* Type scale: px for digital, minimum body 16px (our readers are 60+) */
  --fs-display: clamp(2.75rem, 6vw, 4.5rem);
  --fs-h1:      clamp(2.25rem, 4.5vw, 3.25rem);
  --fs-h2:      clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.5rem);
  --fs-lead:    clamp(1.0625rem, 1.5vw, 1.25rem);
  --fs-body:    1rem;      /* 16px floor, do not go below */
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.65;

  /* ---- Spacing (8px base) ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;

  /* ---- Layout ---- */
  --container:     1200px;
  --container-narrow: 780px;
  --gutter:        clamp(1.25rem, 4vw, 3rem);

  /* ---- Radius & elevation ---- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20,20,22,.04), 0 2px 8px rgba(61,24,82,.04);
  --shadow:    0 2px 6px rgba(20,20,22,.05), 0 12px 32px rgba(61,24,82,.08);
  --shadow-lg: 0 8px 24px rgba(61,24,82,.12), 0 24px 64px rgba(61,24,82,.12);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .45s;

  /* ---- Controls ---- */
  --tap-min: 44px;   /* accessibility floor for tap targets */
}

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: .001s; }
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
    scroll-behavior: auto !important;
  }
}