/* =========================================================
   File: css/variables.css
   Title: Global Design Tokens — Single Source of Truth
   Updated: 2025-11-08 (restored responsive typography)
========================================================= */

:root {

  /* =========================================================
     TYPOGRAPHY — BASE
  ========================================================= */
  --font-base: 'Roboto', system-ui, -apple-system, Arial, sans-serif;
  --font-ui: 'Roboto Condensed', 'Roboto', system-ui, Arial, sans-serif;

  --body-font: var(--font-base);
  --body-fs: 1rem;
  --body-lh: 1.5;
  --body-fw: 400;

  --h1-font: var(--font-ui);
  --h2-font: var(--font-ui);
  --h3-font: var(--font-base);
  --h4-font: var(--font-base);
  --h5-font: var(--font-base);
  --h6-font: var(--font-base);

  /* FLUID HEADINGS */
  --h1-fs: clamp(2.2rem, 6.5vw + 0.5rem, 5rem);
  --h2-fs: clamp(1.1rem, 3.5vw + 0.5rem, 1.4rem);
  --h3-fs: clamp(1.1rem, 3vw + 0.25rem, 1.4rem);
  --h4-fs: clamp(1rem, 2vw + 0.2rem, 1.2rem);
  --h5-fs: clamp(0.8rem, 1.5vw + 0.1rem, 0.9rem);
  --h6-fs: clamp(0.8rem, 1vw + 0.1rem, 0.8rem);

  --h1-lh: 1;
  --h2-lh: 1.25;
  --h2-fw: 100;
  --h3-lh: 1.3;
  --h4-lh: 1.4;

  --heading-gap-sm: 0.75rem;
  --heading-gap: 1rem;
  --heading-gap-lg: 1.5rem;

  /* Paragraph rhythm */
  --p-gap: 1rem;
  --p-gap-compact: 0.65rem;

  /* Small copy */
  --copy-sm-fs: 0.9rem;
  --copy-sm-lh: 1.35;
  --copy-sm-title-w: 500;
  --copy-sm-body-w: 300;
  --copy-sm-caption-w: 500;

  --caption-fs: 0.8rem;
  --caption-fw: 400;

  /* =========================================================
     CARDS
  ========================================================= */
  --card-body-padding: 0;
  --card-title-font: var(--font-ui);
  --card-title-fs: 1rem;
  --card-title-fw: 500;
  --card-title-lh: 1.35;
  --card-title-ls: normal;
  --card-border: 0px solid currentColor;
  --card-body-border-top: 1px solid currentColor;

  /* =========================================================
     ACCORDIONS
  ========================================================= */
  --acc-btn-font: var(--font-ui);
  --acc-btn-fs: var(--h2-fs);
  --acc-btn-lh: var(--h2-lh);
  --acc-btn-fw: 200;

  --acc-icon-open: "–";
  --acc-icon-closed: "+";
  --acc-icon-fw: 300;
  --acc-icon-fw-active: 300;

  /* =========================================================
     COLORS
  ========================================================= */
  --color-black: #000;
  --color-white: #fff;
  --color-grey: #808080;

  --color-bg: var(--color-white);
  --color-text: var(--color-black);

  --color-button: var(--color-grey);


  --color-bg-dark: #000;
  --color-text-dark: #111;
  --color-text-light: #fff;
  --color-text-dim: rgba(255,255,255,0.75);
  --color-link-light: #9cf;
  --color-border-light: rgba(255,255,255,0.2);

  /* =========================================================
     LAYOUT
  ========================================================= */
  --grid-gap: 2rem;  
  --site-xpad: clamp(1.5rem, 4vw, 3rem);
  --page-max: 1000px;
  --content-max: 80ch;

  --mid-col: 260px;

  --box-pad: 1rem;
  --box-border: 0.5px solid currentColor;
  --radius-md: 0;

  /* =========================================================
     TABLES
  ========================================================= */
  --table-font: var(--font-ui);
  --table-fs: 0.9rem;
  --table-lh: 1;
  --table-fw: 400;
  --table-th-fw: 500;

  --table-border-color: currentColor;
  --table-row-border: 1px dotted var(--table-border-color);
  --table-th-border: 1px solid var(--table-border-color);

  --table-pad-x: 0rem;
  --table-pad-y: 0.75rem;
  --table-stack-gap: 2rem;

  --table-caption-fw: 500;
  --table-caption-fs: 0.85rem;
  --table-caption-lh: 1.2;
  --table-caption-mb: 0.5rem;

  /* =========================================================
     MODALS
  ========================================================= */
  --modal-overlay-bg: rgba(0,0,0,0.8);
  --modal-bg: #000;
  --modal-text: #fff;
  --modal-border: 1px solid #fff;
  --modal-radius: 0;
    
    --btn-light-bg: #fff;
  --btn-light-fg: #000;
  --btn-dark-bg: transparent;
  --btn-dark-fg: #fff;
  --btn-hover-bg: #fff;
  --btn-hover-fg: #000;

  /* =========================================================
     BRAND
  ========================================================= */
  --logo-size: 120px;
}

/* =========================================================
   HAIRLINE SUPPORT
========================================================= */
@supports (border: 0.5px solid #000) {
  :root { --hairline: 0.5px; }
}

/* =========================================================
   RESPONSIVE TYPOGRAPHY
========================================================= */
@media (min-width: 600px) and (max-width: 767.98px) {
  :root {
    --h1-fs: 2.8rem;
    --h2-fs: 1.15rem;
    --h3-fs: 1.1rem;
    --heading-gap-lg: 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  :root {
    --h1-fs: 2.8rem;
    --h2-fs: 1.3rem;
    --h3-fs: 1.3rem;
    --heading-gap-lg: 2rem;
  }
}
@media (min-width: 992px) {
  :root {
    --h1-fs: 3.8rem;
    --h2-fs: 1.4rem;
    --h3-fs: 1.3rem;
    --heading-gap-lg: 2.25rem;
  }
}
@media (min-width: 1200px) {
  :root {
    --h1-fs: 4.3rem;
    --h2-fs: 1.5rem;
    --h3-fs: 1.3rem;
    --heading-gap-lg: 2.5rem;
  }
}
@media (min-width: 1440px) {
  :root {
    --h1-fs: 5.5rem;
    --h2-fs: 2rem;
    --h3-fs: 1.7rem;
    --heading-gap-lg: 3rem;
  }
}

/* =========================================================
   END OF FILE — css/variables.css
========================================================= */