/* =============================================================
   GLOBAL DESIGN SYSTEM — ERStyles.com
   This file defines the visual foundation of the entire site:
   fonts, colors, spacing, typography, and base button styles.
   Every page links to this file so changes here apply everywhere.
   ============================================================= */


/* -------------------------------------------------------------
   FONTS
   We load Figtree from Google Fonts in the four weights we use.
   The `display=swap` parameter means text shows immediately in
   a fallback font while Figtree loads, preventing a blank flash.
   ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;500;600;700&display=swap');


/* -------------------------------------------------------------
   CSS CUSTOM PROPERTIES (VARIABLES)
   Variables let us define a value once and reuse it everywhere.
   To change the brand color across the whole site, we change it
   here — not in every individual file.
   ------------------------------------------------------------- */
:root {

  /* --- Brand Colors --- */
  --color-coral: #FA8072;         /* Primary accent — buttons, CTAs */
  --color-steel-blue: #5BA0D0;    /* Secondary accent — hover states */

  /* --- Emotion Colors ---
     Pastel tones — light enough to use as section/card backgrounds
     with dark body text sitting comfortably on top. */
  --color-anger:      #FFC5C5;    /* Light pastel red */
  --color-anxiety:    #DDD4F5;    /* Light lavender */
  --color-excitement: #FCF2B0;    /* Light butter yellow */
  --color-overwhelm:  #FDE3C4;    /* Light peach */
  --color-sadness:    #C8DCF0;    /* Light sky blue */
  --color-shame:      #C8E6CB;    /* Light mint */

  /* --- Neutral Colors --- */
  --color-text:         #1A1A1A;  /* Main body text */
  --color-text-muted:   #666666;  /* Captions, secondary text */
  --color-background:   #FFFFFF;  /* Page background */
  --color-surface:      #F7F7F7;  /* Cards, section backgrounds */
  --color-border:       #E0E0E0;  /* Dividers, input borders */

  /* --- Typography --- */
  --font-family: 'Figtree', sans-serif;

  --font-weight-light:    300;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --text-small: 16px;   /* Captions, footnotes */
  --text-body:  20px;   /* Default body text */
  --text-h4:    22px;
  --text-h3:    28px;
  --text-h2:    36px;
  --text-h1:    48px;

  --line-height-body:    1.6;   /* Comfortable reading spacing */
  --line-height-heading: 1.2;   /* Tighter spacing for large text */

  /* --- Spacing --- */
  /* A consistent spacing scale keeps the layout feeling organized.
     Each step is roughly double the previous one. */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  80px;

  /* --- Shape --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* --- Motion --- */
  --transition: 0.25s ease;   /* Used on hover effects */

}


/* -------------------------------------------------------------
   BASE RESET
   Browsers apply their own default styles (margins, padding,
   box sizing). We clear those here so we start from a clean
   slate that behaves consistently across all browsers.
   ------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;   /* Padding and borders are included in
                               an element's stated width/height */
  margin: 0;
  padding: 0;
}


/* -------------------------------------------------------------
   BASE TYPOGRAPHY
   ------------------------------------------------------------- */
body {
  font-family:   var(--font-family);
  font-weight:   var(--font-weight-light);
  font-size:     var(--text-body);
  line-height:   var(--line-height-body);
  color:         var(--color-text);
  background:    var(--color-background);
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--line-height-heading);
  color:       var(--color-text);
}

h1 { font-size: var(--text-h1); font-weight: var(--font-weight-bold); }
h2 { font-size: var(--text-h2); font-weight: var(--font-weight-semibold); }
h3 { font-size: var(--text-h3); font-weight: var(--font-weight-semibold); }
h4 { font-size: var(--text-h4); font-weight: var(--font-weight-medium); }

p {
  margin-bottom: var(--space-sm);
}

p:last-child {
  margin-bottom: 0;   /* Prevents unwanted space after the last paragraph
                         in a container */
}

small, .text-small {
  font-size:   var(--text-small);
  font-weight: var(--font-weight-light);
  color:       var(--color-text-muted);
}

a {
  color:           var(--color-steel-blue);
  text-decoration: none;
  transition:      opacity var(--transition);
}

a:hover {
  opacity: 0.8;
}


/* -------------------------------------------------------------
   BUTTONS
   .btn is the base class. .btn-primary applies the coral style.
   Additional variants (e.g. .btn-secondary) can be added later.
   ------------------------------------------------------------- */
.btn {
  display:         inline-block;
  padding:         14px 32px;
  border-radius:   var(--radius-md);
  font-family:     var(--font-family);
  font-size:       var(--text-body);
  font-weight:     var(--font-weight-medium);
  line-height:     1;
  cursor:          pointer;
  border:          none;
  text-decoration: none;
  transition:      background-color var(--transition);
}

.btn-primary {
  background-color: var(--color-coral);
  color:            #FFFFFF;
}

.btn-primary:hover {
  background-color: var(--color-steel-blue);
  color:            #FFFFFF;
  opacity:          1;   /* Overrides the default link hover opacity */
}