/* =========================================
   TOKENS.CSS — DESIGN FOUNDATION (UPDATED)
   Purpose:
   - Central source of truth for all styling
   - Uses semantic tokens for easy theming
   - Components should NOT use raw colors
========================================= */

:root {

  /* ==================================================
     PRIMITIVE COLORS (DO NOT USE DIRECTLY IN COMPONENTS)
     These are your palette building blocks
  ================================================== */

  --sage-500: rgb(168, 188, 176);
  --sage-700: rgb(95, 120, 110);

  --lavender-500: rgb(182, 166, 201);

  --offwhite-100: rgb(245, 244, 240);

  --charcoal-900: rgb(54, 58, 56);

  --taupe-500: rgb(140, 132, 125);

  /* Optional legacy support (gold can remain as accent if needed) */
  --gold: rgb(140, 132, 125);  /* was #d4af37; */
  --gold-dark: rgb(111, 103, 9);    /* was #b8860b; */
  --gold-soft: rgb(244, 240, 235);   /* was #fff7e6; */


  /* ==================================================
     SEMANTIC COLORS (USE THESE IN UI)
     These define meaning, not specific colors
  ================================================== */

  /* ---------- Background System ---------- */

--bg: rgba(245, 244, 240, 1);              /* Main page background */

--surface: rgba(255, 255, 255, 0.85);      /* Cards, panels */

--surface-alt: rgba(168, 188, 176, 0.15);  /* Sage tint section */

/* Lavender surface variants */
--surface-lavender-light: rgba(182, 166, 201, 0.3);
--surface-lavender: rgba(182, 166, 201, 0.5);
--surface-secondary: rgba(140, 132, 125, 0.7);

--footer-bg: rgb(54, 58, 56); 

  /* ---------- Text System ---------- */

  --text: rgba(54, 58, 56, 1);        /* Primary text */
  --text-secondary: rgba(54, 58, 56, 0.7);
  --muted: rgba(140, 132, 125, 0.8);  /* Metadata, labels */
  --text-white: rgba(255, 255, 255, 1);
  --footer-text: rgba(245, 244, 240, 0.9);
  --footer-muted: rgba(245, 244, 240, 0.65);

  /* ---------- Brand System ---------- */

  /* Replaces old teal with grounded sage */
  --brand-base: rgba(125, 160, 145, 0.8);
  --brand-light: rgba(125, 160, 145, 0.35);
  --brand-dark: rgba(125, 160, 145, 1);
    
    
  /* =========================================
   BRAND DERIVED INTERACTION COLORS
   These are NOT new colors — just brand variations
========================================= */

 --brand: rgba(125, 160, 145, 1);
 --brand-hover: rgba(125, 160, 145, 0.85);
 --brand-active: rgba(95, 120, 110, 0.70);
 --brand-soft: rgba(95, 120, 110, 0.35);


  /* ---------- Link System (SEPARATE FROM BRAND) ---------- */

  /* Lavender gives a softer, premium feel than red/burgundy */
  --link-color: rgba(112, 87, 142, 0.7);
  --link-hover-color: rgba(112, 87, 142, 1);
  --link-button: rgb(182, 166, 201); 


  /* ---------- UI Elements ---------- */

  --border: rgba(140, 132, 125, 0.3);
  --divider: rgba(54, 58, 56, 0.1);


  /* ---------- Status Colors (Keep Familiar UX Patterns) ---------- */

  --success: rgb(120, 160, 135);
  --success-bg: rgba(120, 160, 135, 0.15);

  --error: rgb(190, 90, 90);
  --warning: rgb(210, 160, 90);


  /* ---------- Eyebrow / Labels ---------- */

  --eyebrow-color: rgba(140, 132, 125, 1);


  /* ==================================================
     SPACING (UNCHANGED — ALREADY GOOD)
  ================================================== */

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 30px;


  /* ==================================================
     BORDER RADIUS (UNCHANGED)
  ================================================== */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;


  /* ==================================================
     SHADOWS (SLIGHTLY SOFTENED FOR NEW PALETTE)
  ================================================== */

  --shadow-sm: 0 2px 6px rgba(54, 58, 56, 0.08);
  --shadow-md: 0 8px 20px rgba(54, 58, 56, 0.12);


  /* ==================================================
     TYPOGRAPHY (UNCHANGED)
  ================================================== */

  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

}