/* =============================================================
   Clover Dashboard — Colors & Typography
   Aligned to the canonical Clover Design System:
   Sora (display) + Inter (UI/body), brand green #00d59f,
   midnight navy #041e3f, navy-tinted shadows.
   ============================================================= */

:root {
  /* ----- Brand: Clover green ----- */
  --color-primary:            #00d59f;   /* Clover green — primary accent, CTAs */
  --color-primary-accessible: #008a67;   /* brand-700 — text-on-light safe */
  --color-primary-light:      #ccf7ec;
  --color-primary-50:   #f2fdfa;         /* mint wash */
  --color-primary-100:  #ccf7ec;         /* brand-200 */
  --color-primary-200:  #a6f0dd;         /* brand-300 */
  --color-primary-300:  #6fe6c8;
  --color-primary-400:  #33ddb3;
  --color-primary-500:  #00d59f;
  --color-primary-600:  #009e76;         /* brand-dark — hover/pressed */
  --color-primary-700:  #008a67;         /* brand-700 — deep green text */
  --color-primary-800:  #015b44;
  --color-primary-900:  #003221;

  /* ----- Midnight navy (brand anchor / dark stage) ----- */
  --color-navy:     #041e3f;
  --color-navy-600: #253b58;             /* muted navy — subtext/borders on dark */
  --color-navy-50:  #f2f4f5;             /* cool off-white */

  /* ----- Neutrals (cool zinc, matches DS fg scale) ----- */
  --color-bg:            #f2f4f5;   /* cool off-white page ground */
  --color-bg-white:      #ffffff;
  --color-neutral-50:  #f4f4f5;
  --color-neutral-100: #ececee;
  --color-neutral-200: #e4e4e7;     /* = DS hairline border */
  --color-neutral-300: #d4d4d8;     /* = DS border-strong */
  --color-neutral-400: #a1a1aa;
  --color-neutral-500: #71717a;     /* = DS fg3 */
  --color-neutral-600: #52525b;
  --color-neutral-700: #3f3f46;     /* = DS fg2 */
  --color-neutral-800: #27272a;
  --color-neutral-900: #09090b;     /* = DS fg1 */

  /* ----- Semantic: data only ----- */
  --color-positive:      #ccf7ec;
  --color-positive-dark: #008a67;
  --color-negative:      #fdecec;
  --color-negative-dark: #b42318;

  /* ----- Derived semantic tokens ----- */
  --color-foreground:        #09090b;
  --color-muted-foreground:  #52525b;
  --color-border:            #09090b;   /* strong / near-black */
  --color-border-muted:      #e4e4e7;   /* hairline */
  --color-muted:             #ececee;
  --color-link:              #008a67;

  /* ----- Layout primitives ----- */
  --radius:         8px;
  --radius-pill:    999px;
  --nav-height:     5.5rem;
  --container-max:  90rem;

  /* ----- Spacing scale ----- */
  --gap-sm:          8px;
  --gap-md:          16px;
  --gap-main:        32px;
  --section-padding: 4rem;

  /* ----- Navy-tinted shadows (DS) ----- */
  --shadow-sm: 0 1px 2px rgba(4,30,63,.06), 0 1px 3px rgba(4,30,63,.10);
  --shadow-md: 0 4px 12px rgba(4,30,63,.08), 0 2px 4px rgba(4,30,63,.06);
  --shadow-lg: 0 18px 40px rgba(4,30,63,.12), 0 6px 12px rgba(4,30,63,.08);

  /* ----- Typography families ----- */
  --font-heading: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html, body {
  background: var(--color-bg);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-feature-settings: "cv11", "ss01", "ss03";  /* Inter stylistic alternates */
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { text-wrap: pretty; }