/* ─────────────────────────────────────────────
   Deepthi Design System — Color Tokens
   Source: Moodboard.fig (deepthi.design)
   ───────────────────────────────────────────── */

:root {
  /* ── Brand palette (named) ── */
  --color-penn-blue:    #0A1047;   /* deep navy — primary brand */
  --color-marian-blue:  #303880;   /* mid indigo — secondary */
  --color-linen:        #F6E9E0;   /* warm cream — bg / surface */
  --color-sandy-brown:  #FFA364;   /* warm peach — accent light */
  --color-pumpkin:      #FD7118;   /* vivid orange — accent CTA */

  /* ── Neutrals ── */
  --color-white:        #FFFFFF;
  --color-off-white:    #FAF7F4;   /* warm white tint */
  --color-smoke:        #F0EBE5;   /* subtle warm divider bg */
  --color-stone-100:    #E8DDD4;
  --color-stone-200:    #C8BDB4;
  --color-stone-400:    #8C817A;
  --color-stone-600:    #5A524D;
  --color-stone-800:    #2E2A27;
  --color-ink:          #120E0B;   /* near-black body text */

  /* ── Blue scale ── */
  --color-blue-50:      #ECEEFF;
  --color-blue-100:     #C5CAF5;
  --color-blue-200:     #8E96E8;
  --color-blue-400:     #303880;   /* = marian-blue */
  --color-blue-700:     #1A2260;
  --color-blue-900:     #0A1047;   /* = penn-blue */

  /* ── Orange scale ── */
  --color-orange-50:    #FFF3EB;
  --color-orange-100:   #FFD9BE;
  --color-orange-200:   #FFA364;   /* = sandy-brown */
  --color-orange-400:   #FD7118;   /* = pumpkin */
  --color-orange-600:   #D45A00;
  --color-orange-800:   #7A3300;

  /* ── Semantic aliases ── */
  --bg-base:            var(--color-off-white);
  --bg-surface:         var(--color-white);
  --bg-surface-warm:    var(--color-linen);
  --bg-dark:            var(--color-penn-blue);
  --bg-dark-mid:        var(--color-marian-blue);

  --text-primary:       var(--color-penn-blue);
  --text-body:          var(--color-stone-800);
  --text-muted:         var(--color-stone-400);
  --text-on-dark:       var(--color-linen);
  --text-on-orange:     var(--color-white);

  --accent-primary:     var(--color-pumpkin);
  --accent-light:       var(--color-sandy-brown);
  --accent-hover:       var(--color-orange-600);

  --border-subtle:      var(--color-stone-100);
  --border-default:     var(--color-stone-200);

  --focus-ring:         var(--color-pumpkin);
}