/* ==========================================================================
   HOWSPACE BRAND DESIGN TOKENS
   ========================================================================== 
   Source: Howspace Brand Guidelines (4/2023)
   Methodology: Design tokens mapping raw values to semantic, reusable variables.
   ========================================================================== */

:root {
  /* ==========================================
     1. CORE COLOR PALETTE (Primitives)
     NOTE: Use these sparingly in component CSS. 
     Prefer Semantic Theme variables below.
     ========================================== */
  --color-white:          #FFFFFF;
  --color-grey:           #EEEEEE;
  --color-dark-grey:      #333333;
  --color-black:          #000000;
  
  --color-purple:         #5B47CF;
  --color-dark-purple:    #421C65;
  
  /* Secondary & Background Colors */
  --color-light-beige:    #F7F2EB;
  --color-dark-beige:     #F2EADE;
  --color-light-orange:   #FFDFD5;
  --color-light-pink:     #FDD9DF;
  --color-light-purple-1: #DED5F4;
  --color-light-purple-2: #CEC0EE;

  /* ==========================================
     2. SEMANTIC THEME (Applied Variables)
     Mapping brand colors to UI roles to enable 
     easy pivoting (e.g., future dark mode).
     ========================================== */
  --bg-page:              var(--color-light-beige); /* Warm off-white base */
  --bg-card:              var(--color-white);
  --bg-card-hover:        var(--color-light-purple-1);
  
  --text-primary:         var(--color-black);
  --text-secondary:       var(--color-dark-grey);
  --text-inverse:         var(--color-white);
  
  --border-subtle:        var(--color-grey);
  
  --brand-primary:        var(--color-purple);
  --brand-primary-hover:  var(--color-dark-purple);

  /* ==========================================
     3. TYPOGRAPHY
     ========================================== */
  /* Font Families: GT Walsheim Pro primary, native system fallbacks */
  --font-family-sans:     'GT Walsheim Pro', system-ui, -apple-system, sans-serif;
  
  /* Type Scale */
  --font-size-sm:         0.875rem;   /* 14px - Metatext, Footer */
  --font-size-base:       1rem;       /* 16px - Base body text */
  --font-size-md:         1.125rem;   /* 18px - Lead copy / Intro paragraphs */
  --font-size-lg:         1.5rem;     /* 24px - H3 / Card Titles */
  --font-size-xl:         2.5rem;     /* 40px - H2 / Section Titles */
  --font-size-xxl:        3.5rem;     /* 56px - H1 / Hero Text */

  /* Font Weights */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-bold:     700;

  /* ==========================================
     4. GEOMETRY & ELEVATION
     "Squares are never truly square" - Guidelines Section 4.2
     ========================================== */
  /* Border Radii */
  --radius-sm:            8px;
  --radius-md:            16px;
  --radius-lg:            24px;       /* Bento Box standard */
  --radius-xl:            32px;
  --radius-pill:          9999px;     /* Buttons & Metric Badges */

  /* Shadows */
  --shadow-sm:            0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:            0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

  /* ==========================================
     5. SPACING SYSTEM (Linear Scale)
     Standardized spacing to prevent arbitrary margins.
     ========================================== */
  --space-2:              8px;
  --space-3:              12px;       /* Finer control for form inputs */
  --space-4:              16px;       /* Standard component padding */
  --space-6:              24px;
  --space-8:              32px;
  --space-10:             40px;       /* Standard Bento padding */
  --space-16:             64px;       /* Standard Section padding */
}