/* ============================================================
   LDD Kreationz — theme.css
   Brand color tokens. Single source of truth.

   Rules:
   - Purple leads. Royal Vision is the hero.
   - Green grounds. Grounded Grace supports.
   - Gold crowns. Crown Gold is the optional celebration accent.
   - No pure black. Use Deep Plum (--brand-text) where black would go.

   Usage: reference the ROLE aliases in components
   (var(--brand-primary), var(--brand-text), etc).
   Change a raw value once and it updates everywhere.
   ============================================================ */

:root {

  /* --- Raw palette --- */

  /* Core (always on) */
  --color-royal-vision:  #8247C9;  /* faith + royalty, Proverbs 31 */
  --color-deep-purple:   #47007A;  /* rich depth */
  --color-deep-plum:     #442266;  /* text + near-black, shield line */
  --color-grounded-grace:#8BAE55;  /* Army service, stars + leaves */

  /* Celebration accent (optional layer) */
  --color-crown-gold:      #C79A3E;  /* milestones, foil, highlights */
  --color-crown-gold-text: #9C7A2E;  /* darker gold for readable text on light */

  /* Purple rotation */
  --color-bright-purple: #7700CC;  /* vivid accent */
  --color-lavender-mist: #EEEBF5;  /* page background */

  /* Support neutrals + extended */
  --color-pale-taupe: #E8E4DF;
  --color-soft-white: #F7F6F2;
  --color-white:      #FFFFFF;
  --color-deep-olive: #454B1B;     /* deep green accent */


  /* --- Role aliases (use these in your components) --- */

  --brand-primary:     var(--color-royal-vision);
  --brand-secondary:   var(--color-grounded-grace);
  --brand-accent:      var(--color-crown-gold);
  --brand-accent-text: var(--color-crown-gold-text);
  --brand-text:        var(--color-deep-plum);
  --brand-bg:          var(--color-lavender-mist);
  --brand-surface:     var(--color-white);
  --brand-border:      rgba(68, 34, 102, 0.14); /* soft plum, replaces gray lines */
}


/* ============================================================
   Optional base styles. Delete this block if your project
   already handles global styling.
   ============================================================ */

body {
  background: var(--brand-bg);
  color: var(--brand-text);
}

a { color: var(--brand-primary); }

/* Example: a primary button using the tokens */
.btn-primary {
  background: var(--brand-primary);
  color: var(--color-white);
  border: none;
}

/* Example: a celebration accent (milestone pieces) */
.btn-accent {
  background: var(--brand-accent);
  color: var(--brand-text);
}


/* ============================================================
   Using Tailwind? (Next.js, 21st.dev, etc.)

   Tailwind v4 — add this to your global css:

     @theme {
       --color-primary:   #8247C9;
       --color-secondary: #8BAE55;
       --color-accent:    #C79A3E;
       --color-plum:      #442266;
       --color-mist:      #EEEBF5;
     }

   Then use classes like bg-primary, text-plum, bg-mist.

   Tailwind v3 — add to tailwind.config theme.extend.colors:

     colors: {
       primary: '#8247C9',
       secondary: '#8BAE55',
       accent: '#C79A3E',
       plum: '#442266',
       mist: '#EEEBF5',
     }
   ============================================================ */