/* ============================================================
   Manya Khanna — Color tokens
   Palette derived directly from the four logo colorways plus
   the moodboard's grounded neutrals (dusty beige, light brown)
   and a quiet grounding green. Calm, trustworthy, luxurious.
   ============================================================ */

:root {
  /* ---- Brand core ---------------------------------------- */
  /* Deep Teal — the primary brand voice (logo on cream). */
  --teal-900: #16313D;
  --teal-800: #1C3E4D;
  --teal-700: #234B5D; /* PRIMARY brand color */
  --teal-600: #2E5A6C;
  --teal-500: #45707F;
  --teal-400: #7497A6;
  --teal-300: #A2BCC8;

  /* Dusty Blue — soft, airy secondary (sky / calm). */
  --blue-300: #B0C6D1; /* logo dusty blue */
  --blue-200: #C7D7DF;
  --blue-100: #DDE8ED;
  --blue-050: #EDF3F5;

  /* Ink — grounded charcoal-brown (warm near-black). */
  --ink-900: #2A2823;
  --ink-800: #34312A; /* logo ink */
  --ink-700: #4A463D;
  --ink-600: #635D52;

  /* ---- Neutrals: warm ivory → sand (moodboard) ----------- */
  --cream-050: #FEFCF4; /* lightest paper */
  --cream-100: #FBF8EC; /* primary cream surface (logo bg) */
  --cream-200: #F4EFDF; /* card / raised cream */
  --sand-300:  #E8E0CC; /* hairlines, wells */
  --sand-400:  #D8CDB3; /* borders on cream */
  --taupe-500: #B7A98C; /* muted beige / light brown */
  --taupe-600: #8C7E64; /* warm caption text */

  /* ---- Grounding green (moodboard 02) -------------------- */
  --sage-600: #5E6B57;
  --sage-500: #76836C;
  --sage-300: #AFB9A4;
  --sage-100: #DDE2D6;

  /* ---- Pure ---------------------------------------------- */
  --white: #FFFFFF;
  --black: #000000;

  /* ---- Functional / status (muted, on-brand) ------------- */
  --success: #5E6B57;   /* sage — growth */
  --success-soft: #DDE2D6;
  --caution: #B08A4F;   /* warm amber, not alarming */
  --caution-soft: #F0E6D2;
  --error: #9C5A4F;     /* muted terracotta */
  --error-soft: #EFDBD6;
  --info: #517E92;
  --info-soft: #DDE8ED;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components & UI
     ============================================================ */

  /* Surfaces */
  --surface-page: var(--cream-100);     /* default app/page background */
  --surface-page-alt: var(--cream-050); /* lighter section */
  --surface-card: var(--cream-050);     /* card on cream page */
  --surface-raised: var(--white);       /* elevated panel / modal */
  --surface-well: var(--cream-200);     /* inset / quiet block */
  --surface-inverse: var(--teal-700);   /* dark brand section */
  --surface-inverse-deep: var(--teal-900);
  --surface-ink: var(--ink-800);        /* charcoal section */

  /* Text */
  --text-strong: var(--ink-900);        /* headings on light */
  --text-body: var(--ink-800);          /* body copy */
  --text-muted: var(--taupe-600);       /* captions, meta */
  --text-soft: var(--teal-500);         /* tinted secondary */
  --text-on-teal: var(--cream-100);     /* text on teal */
  --text-on-teal-muted: var(--blue-200);
  --text-on-ink: var(--cream-100);      /* text on charcoal */
  --text-brand: var(--teal-700);        /* brand-tinted text/links */

  /* Lines & borders */
  --border-soft: var(--sand-300);       /* hairline on cream */
  --border-default: var(--sand-400);    /* default border */
  --border-strong: var(--taupe-500);    /* emphasized border */
  --border-on-teal: rgba(251, 248, 236, 0.22);
  --border-focus: var(--teal-600);

  /* Brand actions */
  --action-primary: var(--teal-700);
  --action-primary-hover: var(--teal-800);
  --action-primary-active: var(--teal-900);
  --action-on-primary: var(--cream-100);
  --action-secondary-border: var(--teal-700);
  --action-secondary-text: var(--teal-700);
  --action-ghost-hover: var(--blue-050);

  /* Accents */
  --accent-blue: var(--blue-300);
  --accent-sand: var(--taupe-500);
  --accent-sage: var(--sage-500);

  /* Focus ring */
  --ring: rgba(45, 90, 111, 0.35);
}