/* ==========================================================================
   Design tokens: Technovative Applications
   --------------------------------------------------------------------------
   Every color, type size, space, and grid measurement on the site is defined
   here once and referenced by name everywhere else. The values come from
   the specs in /docs (grid.md, typography.md, colors.md). If a value here
   and the docs disagree, the docs are the source of truth.

   Written mobile-first: the base values are for mobile, and each media
   query below overrides only what changes at that breakpoint.

     Mobile         0–390px      (base)
     Small tablet   391–810px    (min-width: 391px; frame lines from 600px)
     Tablet         811–900px    (min-width: 811px)
     Desktop        901–1439px   (min-width: 901px)
     Monitor        1440px+      (no token changes; the frame stops at --frame-max)
   ========================================================================== */

:root {

  /* ---------- Color: palette ---------- */
  --color-black:       #000000;
  --color-sand:        #B8BC97;
  --color-dark-sand:   #939679;
  --color-green:       #32B45A;
  --color-text-gray:   #6B6B6B;
  --color-border:      #C9C9C4;
  --color-mid-gray:    #DCD9D6;
  --color-light-gray:  #F0F0EE;
  --color-smoke:       #F9F9F9;

  /* ---------- Color: roles ----------
     Components use these names, so a role can be recolored in one place. */
  --color-text:        var(--color-black);
  --color-text-muted:  var(--color-text-gray);
  --color-line:        var(--color-border);
  --color-page:        var(--color-light-gray);   /* page background, space outside the frame */
  --color-surface:     var(--color-smoke);        /* section and header backgrounds */
  --color-accent:      var(--color-green);

  /* ---------- Typefaces ---------- */
  --font-sans: "Aeonik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Aeonik Fono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* ---------- Type styles ----------
     H1–H3 sizes are in rem (they scale with the browser's text-size setting).
     H4, H5, H6, and Body are in px (fixed). 1rem = 16px by default. */

  --text-h1-size:     3rem;       /* 48px */
  --text-h1-leading:  0.9;
  --text-h1-tracking: -0.03em;

  --text-h2-size:     2rem;       /* 32px */
  --text-h2-leading:  1.1;
  --text-h2-tracking: -0.03em;

  --text-h3-size:     1.5rem;     /* 24px */
  --text-h3-leading:  1.1;
  --text-h3-tracking: -0.02em;

  --text-statement-size:     1.75rem;   /* 28px; large statement copy (Company mission) */
  --text-statement-leading:  1.2;
  --text-statement-tracking: 0;

  --text-h4-size:     20px;
  --text-h4-leading:  1.2;
  --text-h4-tracking: 0;

  --text-h5-size:     14px;       /* large buttons and links */
  --text-h5-leading:  1.2;
  --text-h5-tracking: 0;

  --text-h6-size:     12px;       /* small buttons and links, eyebrows, tags, section labels, system lists */
  --text-h6-leading:  1.2;
  --text-h6-tracking: 0;

  --text-body-size:     16px;
  --text-body-leading:  1.5;
  --text-body-tracking: 0;

  /* Mobile menu links (a one-off style, outside the H1–H6 scale) */
  --text-menu-size:     var(--text-h3-size);       /* the mobile menu uses H3: 24px on phones, 32px on tablets */
  --text-menu-weight:   var(--weight-medium);
  --text-menu-leading:  var(--text-h3-leading);
  --text-menu-tracking: var(--text-h3-tracking);

  /* Product list names on the Products page (a one-off style, outside the H1–H6 scale) */
  --text-item-size:     20px;
  --text-item-weight:   var(--weight-medium);
  --text-item-leading:  1.2;
  --text-item-tracking: -0.01em;

  /* ---------- Spacing ----------
     Multiples of 20 for most spacing; multiples of 8 in a few places. */
  --space-8:   8px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-40:  40px;
  --space-60:  60px;
  --space-80:  80px;
  --space-120: 120px;

  /* ---------- Grid & frame ---------- */
  --columns:        1;      /* mobile: content stacks */
  --gutter:         20px;
  --frame-inset:    0px;    /* distance from screen edge to the frame lines (none on mobile) */
  --frame-max:      1360px; /* the lines never sit more than this far apart */
  --line-width:     1px;
  --section-pad-x:  var(--space-20);
  --section-pad-y:  var(--space-60);
  --text-max:       540px;  /* running text never runs wider than this */
  --label-bar-height: 40px;  /* includes its top and bottom lines; 60px from 600px up */

  /* ---------- Header ---------- */
  --header-height: 72px;
  --header-bg:     rgb(249 249 249 / 0.3);   /* Smoke at 30% */
  --header-blur:   12px;   /* Figma "background blur 24" ≈ CSS blur(12px); Figma's value is roughly double CSS's */
}

/* ---------- Small tablet: 391–810px ---------- */
@media (min-width: 391px) {
  :root {
    --columns:     2;

    --text-h1-size: 3.5rem;   /* 56px */
    --text-h2-size: 2.5rem;   /* 40px */
    --text-h3-size: 2rem;     /* 32px */
    --text-h4-size: 24px;
    --text-statement-size: 2rem;   /* 32px */
  }
}

/* ---------- 600px and up: frame lines appear; full-height label bars ---------- */
@media (min-width: 600px) {
  :root {
    --frame-inset: 20px;
    --label-bar-height: 60px;
  }
}

/* ---------- Tablet: 811–900px ---------- */
@media (min-width: 811px) {
  :root {
    --columns: 3;
  }
}

/* ---------- Desktop: 901px and up (Monitor inherits these) ---------- */
@media (min-width: 901px) {
  :root {
    --columns:     12;
    --frame-inset: 40px;

    --text-h1-size: 4.5rem;   /* 72px */
    --text-h2-size: 3rem;     /* 48px */
    --text-statement-size: 2.5rem; /* 40px */
  }
}