/* ============================================================
   Vedic Pathway — Color Tokens
   "Vedic Cream and Charcoal Slate do 80% of the work."
   Do not invent new hex codes. Every value below is a token.
   ============================================================ */

:root {
  /* --- Base palette (the five sacred values) --- */
  --vp-cream: #F9F7F1;        /* Vedic Cream — primary canvas */
  --vp-slate: #2E2E2E;        /* Charcoal Slate — ink, borders, footers */
  --vp-saffron: #D06841;      /* Deep Saffron — the spark of Agni (action) */
  --vp-sage: #849483;         /* Sage Green — grounding Prithvi (trust) */
  --vp-gold: #C2A878;         /* Antique Gold — the Jyotish thread (premium) */
  --vp-white: #FFFFFF;        /* Forbidden EXCEPT inside form-input fields */

  /* --- Tonal steps (derived from the five, for hover/press/wash) --- */
  --vp-saffron-dark: #B9572F;   /* Primary hover — Saffron darkened ~10% */
  --vp-saffron-darker: #9E4826; /* Primary press */
  --vp-saffron-wash: rgba(208, 104, 65, 0.10);

  --vp-sage-dark: #6E7D6D;      /* Sage hover / active divider */
  --vp-sage-wash: rgba(132, 148, 131, 0.10);  /* user chat bubble, disclaimer bg */
  --vp-sage-wash-strong: rgba(132, 148, 131, 0.18);

  --vp-gold-line: rgba(194, 168, 120, 0.40);   /* hairline borders, card edges */
  --vp-gold-wash: rgba(194, 168, 120, 0.08);   /* mandala texture at low opacity */
  --vp-gold-soft: rgba(194, 168, 120, 0.20);

  --vp-slate-70: rgba(46, 46, 46, 0.70);   /* secondary text, disclaimers */
  --vp-slate-50: rgba(46, 46, 46, 0.50);   /* tertiary / placeholder */
  --vp-slate-12: rgba(46, 46, 46, 0.12);   /* faint rules on cream */
  --vp-slate-shadow: rgba(46, 46, 46, 0.05); /* the one soft card shadow */

  --vp-cream-2: #F3F0E7;   /* a half-step deeper cream for nested surfaces */
  --vp-cream-3: #ECE7DA;   /* deepest cream — input wells, table stripes */

  /* ============================================================
     Semantic aliases — reference THESE in components, not the raw base.
     ============================================================ */

  /* Surfaces */
  --surface-canvas: var(--vp-cream);        /* page background */
  --surface-raised: var(--vp-cream);        /* insight cards on canvas */
  --surface-sunken: var(--vp-cream-3);      /* input wells, code/report blocks */
  --surface-sage: var(--vp-sage-wash);      /* disclaimers, calming panels */
  --surface-premium: var(--vp-slate);       /* the upsell "VIP door" */
  --surface-field: var(--vp-white);         /* the ONE place white is allowed */

  /* Text */
  --text-heading: var(--vp-slate);          /* H1–H4, Cormorant */
  --text-body: var(--vp-slate);             /* paragraphs, Lato */
  --text-muted: var(--vp-slate-70);         /* captions, secondary */
  --text-faint: var(--vp-slate-50);         /* placeholders, timestamps */
  --text-on-premium: var(--vp-cream);       /* cream text on slate upsell */
  --text-on-saffron: var(--vp-cream);       /* button label on saffron */
  --text-accent: var(--vp-saffron);         /* "Pathway", links, highlights */
  --text-trust: var(--vp-sage);             /* "Vedic", calm labels */
  --text-premium: var(--vp-gold);           /* gold text on slate */

  /* Lines & borders */
  --border-hairline: var(--vp-gold-line);   /* 1px Antique Gold — the only divider */
  --border-card: var(--vp-gold-line);
  --border-strong: var(--vp-slate);         /* emphatic frames */
  --border-sage: var(--vp-sage);            /* secondary button outline */

  /* Action */
  --action-primary: var(--vp-saffron);
  --action-primary-hover: var(--vp-saffron-dark);
  --action-primary-press: var(--vp-saffron-darker);
}