/* =========================================
   TOKENS.CSS — DESIGN FOUNDATION
   Purpose:
   - Central source of truth for all styling
   - Uses semantic tokens for easy theming
   - Components should NOT use raw colors
   - All tokens are globally available
   - All variables are now valid + functional - 5/21/2026
========================================= */

:root {

  /* ==================================================
     SEMANTIC COLORS
     These define meaning, not raw palette usage
  ================================================== */

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

  --bg: rgba(255, 255, 255, 0.85);                    /* Main page background */
  --bg-light: rgba(245, 244, 240, 0.7);           /* Main page background - lighter */
  --bg-inverse: rgba(54, 58, 56, 1);              /* Dark surface */
  --bg-inverse-light: rgba(54, 58, 56, 0.7);      /* Soft dark surface */
  --bg-inverse-light-more: rgba(54, 58, 56, 0.5); /* Subtle dark surface */

  --surface: rgba(255, 255, 255, 0.85);           /* Cards / panels */
  --surface-accent: rgba(95, 120, 110, 0.8);      /* Sage surface */
  --surface-accent-light: rgba(95, 120, 110, 0.35);
  --surface-alt: rgba(182, 166, 201, 0.15);

  /* ---------- Lavender Surfaces ---------- */

  --surface-lavender-light: rgba(182, 166, 201, 0.3);  /* Lavender tint-light section */
  --surface-lavender: rgba(182, 166, 201, 0.5);        /* Lavender tint-med section */
  --surface-secondary: rgba(182, 166, 201, 0.7);       /* Lavender tint-dark section */

  /* ---------- Footer Backgrounds ---------- */

  --footer-bg-100: rgba(54, 58, 56, 1);
  --footer-bg-300: rgba(54, 58, 56, 0.7);
  --footer-bg-500: rgba(54, 58, 56, 0.5);
  --footer-bg-700: rgba(54, 58, 56, 0.3);

  /* ==================================================
     TEXT SYSTEM
  ================================================== */

  --text: rgba(54, 58, 56, 1);                 /* Primary text */
  --text-secondary: rgba(54, 58, 56, 0.7);    /* Primary text-lighter */
  --muted: rgba(140, 132, 125, 0.8);          /* Primary text-mid-muted */

  --text-inverse: rgba(255, 255, 255, 1);       /* Primary text-inverse */
  --text-inverse-muted: rgba(255, 255, 255, 0.7);    /* Primary text-inverse-muted */

  --footer-text: rgba(245, 244, 240, 0.9);          /* Primary text-footer */
  --footer-muted: rgba(245, 244, 240, 0.65);        /* Primary text-footer-mid-muted */

  /* ==================================================
     BRAND SYSTEM
  ================================================== */

  --brand-100: rgba(125, 160, 145, 0.15);      /* Sage tint-light brand */
  --brand-300: rgba(125, 160, 145, 0.35);      /* Sage tint-light brand */
  --brand-500: rgba(125, 160, 145, 0.7);       /* Sage tint-medium brand */
  --brand-700: rgba(125, 160, 145, 1);         /* Sage tint-full brand */
    
    /* ---------- PRIMARY BRAND (Sage = authority)  ---------- */
  --brand-primary: var(--sage-700);
  --brand-primary-hover: var(--sage-500);
  --brand-primary-muted: rgba(95, 120, 110, 0.35);  
    
    /* ---------- SECONDARY BRAND (Lavender = emotion)  ---------- */
  --brand-accent: var(--lavender-500);
  --brand-accent-hover: rgba(182, 166, 201, 0.85);
  --brand-accent-muted: rgba(182, 166, 201, 0.35);
    
    /* ---------- MAPPING  ---------- */
  --surface-default: var(--surface);                  /* white */
  --surface-muted: var(--surface-alt);                /* light tint */
  --surface-accented: rgba(182,166,201,0.18);          /* lavender wash */
  --surface-overlay: rgba(54,58,56,0.88);            /* footer/dark overlays */

/* ---------- Beige Surfaces ---------- */

--surface-beige-light: rgba(245, 241, 234, 0.70);
--surface-beige: rgba(235, 228, 218, 0.80);
--surface-beige-dark: rgba(222, 212, 198, 0.90);

  /* ---------- Brand Interaction States ---------- */

  --brand-hover: rgba(125, 160, 145, 0.85);     /* Sage tint-medium brand */
  --brand-active: rgba(95, 120, 110, 0.6);       /* Sage tint-medium brand */
  --brand-muted: rgba(95, 120, 110, 0.35);       /* Sage tint-light-soft brand */

  --brand-hover-second: rgba(182, 166, 201, 0.85);     /* Lavender tint-medium brand */
  --brand-active-second: rgba(182, 166, 201, 0.6);      /* Lavender tint-medium brand */
  --brand-muted-second: rgba(182, 166, 201, 0.35);      /* Lavender tint-light-soft brand */

  /* ---------- PHASE OUT - Lavender Interaction Depth ---------- */

  --brand-muted-third-900: rgba(112, 87, 142, 1);       /* Lavender tint-dark-brand */ 
  --brand-muted-third-700: rgba(112, 87, 142, 0.85);     /* Lavender tint-dark-medium-dark-brand */ 
  --brand-muted-third-500: rgba(112, 87, 142, 0.5);      /* Lavender tint-dark-medium-brand */

  /* Backwards compatibility */
  --brand-muted-third: rgba(112, 87, 142, 0.5);

  /* ==================================================
     LINK SYSTEM
  ================================================== */

  --link-color: rgba(112, 87, 142, 1);
  --link-hover-color: rgba(112, 87, 142, 0.7);
  --link-button: rgba(112, 87, 142, 0.5);

  /* ==================================================
     UI ELEMENTS
  ================================================== */

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

  /* ---------- Focus States ---------- */

  --focus-ring: rgba(125, 160, 145, 0.35);
  --focus-ring-offset: rgba(245, 244, 240, 1);

  /* ---------- Overlay / Scrims ---------- */

  --overlay-dark: rgba(0, 0, 0, 0.45);
  --overlay-light: rgba(255, 255, 255, 0.65);

  /* ==================================================
     STATUS COLORS
  ================================================== */

  --success-500: rgb(120, 160, 135);
  --success-700: rgba(120, 160, 135, 0.35);

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

  /* ==================================================
     LABELS / EYEBROWS
  ================================================== */

  --eyebrow-color: rgba(54, 58, 56, 0.7);

  /* ==================================================
     TYPOGRAPHY
  ================================================== */

  --font: 'Montserrat', Arial, sans-serif;

  /* ---------- Typography Scale ---------- */

  --text-xs: 0.8125rem;  /* 13px - micro UI */
--text-sm: 0.9375rem;  /* 15px - secondary UI */
--text-base: 1.0625rem; /* 17px - body */
--text-md: 1.25rem;    /* 20px - emphasis / lead */
--text-lg: 1.5rem;     /* 24px - section headings */

--text-xl: 2rem;       /* 32px - hero title */
--text-2xl: 2.75rem;   /* 44px - display */

  /* =====================================================
   1. SPACING SCALE (ONLY SOURCE OF TRUTH)
===================================================== */

  --space-1: .25rem;    /* --px */
  --space-2: .5rem;     /* --px */
  --space-3: .75rem;    /* --px */
    
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */

  --space-7: 2rem;      /* 32px */
  --space-8: 2.5rem;    /* 40px */
  --space-9: 3rem;    /* 48px */

  /* ==================================================
     BORDER RADIUS
  ================================================== */

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

  /* ==================================================
     MOTION
  ================================================== */

  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;

  /* ==================================================
     SHADOW SYSTEM
  ================================================== */

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

  /* ==================================================
     PRIMITIVE PALETTE
     Do NOT use directly in components
  ================================================== */

  --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);

  /* ==================================================
     LEGACY ACCENTS
     Maintained for backwards compatibility
  ================================================== */

  --accent: rgba(140, 132, 125, 0.5);
  --accent-dark: rgba(140, 132, 125, 0.7);
  --accent-soft: rgba(140, 132, 125, 0.3);

  --accent-secondary-dark: rgba(182, 166, 201, 0.9);    /* lavender - dark */
  --accent-secondary: rgba(182, 166, 201, 0.6);         /* lavender - medium */

  /* Fixed typo while preserving compatibility */
  --accent-secondary-light: rgba(182, 166, 201, 0.3);    /* lavender - light */

}


/* ==================================================
   ACCESSIBLE FOCUS STYLES
================================================== */

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ==================================================
   SELECTION COLORS
================================================== */
    
  --logo-sm: 100px;
  --logo-md: 140px;
  --logo-lg: 180px;
  --logo-xl: 240px;
    
 ::selection {
  background: var(--brand-300);
  color: var(--text);
}  

  --section-xs: 16px;  /* was 24px */
  --section-sm: 28px;  /* was 48px */
  --section-md: 40px;  /* was 64px */
  --section-lg: 56px;  /* was 96px */
  --section-xl: 72px;  /* was 140px */


/* ==================================================
   GLOBAL FOUNDATION
   Optional but recommended defaults
================================================== */

html {
  box-sizing: border-box;
}


body {
  margin: 0;

  font-family: var(--font);

  background: var(--bg);
  color: var(--text);

  font-size: var(--text-base);
  line-height: 1.5;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}