/* ============================================================
   WEGEMS STUDIO — tokens.css
   Design tokens as CSS custom properties. Single source of truth
   for colors, fonts, spacing, layout, and all shared values.
   ============================================================ */

:root {

  /* --- Colors --- */
  --color-bg-primary:    #00140F;   /* Main background */
  --color-bg-subtle:     #002E22;   /* Cards, elevated surfaces */
  --color-bg-deep:       #001A13;   /* Card shadow ring offset */
  --color-text-heading:  #F8F4F1;   /* All headings */
  --color-text-body:     #C6C7C4;   /* Body text, descriptions */
  --color-text-dark:     #101010;   /* Text on light backgrounds (buttons) */
  --color-primary:       #9FE870;   /* Primary CTA, buttons, highlights */
  --color-accent:        #FFD4CD;   /* Tags, accent text */
  --color-alert:         #F67858;   /* Problem icons, warning states */

  /* --- Fonts --- */
  --font-display: 'BricolageGrotesque', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* --- Type Scale --- */
  --text-h1:       4rem;       /* 64px */
  --text-h2:       3rem;       /* 48px */
  --text-h3:       2.5rem;     /* 40px */
  --text-h4:       2.25rem;    /* 36px */
  --text-h5:       1.75rem;    /* 28px */
  --text-h6:       1.25rem;    /* 20px */
  --text-subhead:  1.25rem;    /* 20px */
  --text-body-lg:  1.25rem;    /* 20px */
  --text-body-md:  1.125rem;   /* 18px */
  --text-body-sm:  1rem;       /* 16px */
  --text-btn:      1.375rem;   /* 22px */
  --text-btn-sm:   1.125rem;   /* 18px */
  --text-tag:      1rem;       /* 16px */

  /* --- Line Heights --- */
  --lh-display:  1.1;    /* 110% — headings */
  --lh-relaxed:  1.6;    /* 160% — body large and medium */
  --lh-normal:   1.4;    /* 140% — body small, buttons, tags */
  --lh-btn:      1.4;    /* 140% — buttons */

  /* --- Letter Spacing --- */
  --ls-display: -0.01em; /* H1–H5 */
  --ls-normal:   0em;    /* body, buttons, tags */

  /* --- Spacing Scale --- */
  --space-2:    0.125rem;  /*   2px */
  --space-4:    0.25rem;   /*   4px */
  --space-8:    0.5rem;    /*   8px */
  --space-10:   0.625rem;  /*  10px */
  --space-12:   0.75rem;   /*  12px */
  --space-16:   1rem;      /*  16px */
  --space-20:   1.25rem;   /*  20px */
  --space-24:   1.5rem;    /*  24px */
  --space-32:   2rem;      /*  32px */
  --space-36:   2.25rem;   /*  36px */
  --space-40:   2.5rem;    /*  40px */
  --space-48:   3rem;      /*  48px */
  --space-56:   3.5rem;    /*  56px */
  --space-64:   4rem;      /*  64px */
  --space-73:   4.5625rem; /*  73px — works project right padding */
  --space-80:   5rem;      /*  80px */
  --space-120:  7.5rem;    /* 120px */

  /* --- Layout --- */
  --container-width:       80.875rem;  /* 1294px = 1230px + 32px + 32px */
  --container-large-width: 90rem;      /* 1440px */
  --section-padding:       7.5rem;     /* 120px */
  --title-gap:             4rem;       /*  64px */
  --grid-gap:              2rem;       /*  32px */

  /* --- Border Radius --- */
  --radius-sm:  0.5rem;    /*  8px */
  --radius-md:  0.625rem;  /* 10px */
  --radius-lg:  0.75rem;   /* 12px */
  --radius-xl:  1.25rem;   /* 20px */

  /* --- Borders (always px) --- */
  --border-subtle:   1px solid rgba(250, 249, 245, 0.08);
  --border-default:  1px solid rgba(250, 249, 245, 0.10);
  --border-emphasis: 1.5px solid rgba(250, 249, 245, 0.25);

  /* --- Shadows (always px) --- */
  --shadow-card: 0 0 0 4px #001A13, 0 0 0 5px rgba(255, 255, 255, 0.10);
}

@media (max-width: 991px) {
  :root {
    --text-h1: 3rem;
    --text-h2: 2.5rem;
    --text-h3: 2rem;
    --text-h4: 1.75rem;
    --text-h5: 1.5rem;
    --text-h6: 1.125rem;
  }
}

@media (max-width: 767px) {
  :root {
    --text-h1: 2.5rem;
    --text-h2: 2rem;
    --text-h3: 1.75rem;
    --text-h4: 1.5rem;
    --text-h5: 1.25rem;
    --text-h6: 1rem;
  }
}

@media (max-width: 479px) {
  :root {
    --text-h1: 2rem;
    --text-h2: 1.75rem;
    --text-h3: 1.5rem;
    --text-h4: 1.25rem;
    --text-h5: 1.125rem;
    --text-h6: 1rem;
  }
}