:root {

  /* ─── Colors ─────────────────────────────────────────────── */

  --color-black:            #000000;
  --color-white:            #ffffff;

  /* Brand green */
  --color-green:            #91aa42;   /* links, accents */
  --color-green-light:      #b5d452;   /* primary CTA buttons, design-prompt bg */
  --color-green-light-border: #c6f13a; /* CTA button border */
  --color-green-hover:      #a5c452;   /* CTA button hover */

  /* Grays */
  --color-gray-page:        #f3f3f3;   /* page-title bg, navbar bg, faq-prompt bg */
  --color-gray-card:        #f8f8f8;   /* collection column bg */
  --color-gray-surface:     #f9f9f9;   /* preview/design containers */
  --color-gray-divider:     #e0e0e0;   /* horizontal rules, navbar border */
  --color-gray-border:      #e3e3e3;   /* cards, form fields, accordion */
  --color-gray-disabled-bg: #cccccc;
  --color-gray-disabled-border: #bbbbbb;
  --color-gray-btn:         #d9d9d9;   /* secondary design buttons */
  --color-gray-btn-hover:   #b9b9b9;
  --color-gray-edit-btn:    #e9e9e9;
  --color-gray-edit-hover:  #c9c9c9;
  --color-gray-hover-nav:   #e3e3e3;   /* nav link hover */
  --color-gray-dropdown:    #dddddd;   /* dropdown bg */
  --color-gray-placeholder: #999999;   /* form placeholders */
  --color-gray-muted:       #aaaaaa;   /* subnav hover */
  --color-gray-subtle:      #666666;   /* disabled text */
  --color-gray-text:        #444444;   /* secondary body text, captions */
  --color-nav-current:      #888888;   /* active top-level nav link */
  --color-gray-footer-link: #cccccc;   /* footer links */

  /* Overlay */
  --color-overlay:          rgba(0, 0, 0, 0.76);
  --color-overlay-light:    rgba(0, 0, 0, 0.40);  /* home navbar bg */
  --color-overlay-img:      rgba(0, 0, 0, 0.30);  /* collection btn hover */

  /* ─── Typography ─────────────────────────────────────────── */

  --font-family:            Lato, sans-serif;

  /* Font sizes */
  --font-size-xs:           10px;
  --font-size-sm:           12px;
  --font-size-base:         14px;
  --font-size-md:           16px;
  --font-size-lg:           20px;
  --font-size-xl:           28px;
  --font-size-2xl:          40px;
  --font-size-3xl:          60px;

  /* Line heights */
  --line-height-tight:      1;         /* headings: line-height = font-size */
  --line-height-snug:       20px;      /* eyebrow */
  --line-height-base:       24px;      /* body, form text */
  --line-height-relaxed:    26px;      /* main body copy */

  /* Letter spacing */
  --tracking-tight:         1px;
  --tracking-sm:            1.2px;
  --tracking-base:          1.6px;
  --tracking-md:            2px;       /* nav, labels, h3/h4 */
  --tracking-lg:            4px;       /* h1, h2 */

  /* Font weights */
  --font-weight-light:      300;
  --font-weight-normal:     400;
  --font-weight-bold:       700;

  /* ─── Spacing ─────────────────────────────────────────────── */

  --space-1:                4px;
  --space-2:                8px;
  --space-3:                12px;
  --space-4:                16px;
  --space-5:                20px;
  --space-6:                24px;
  --space-7:                28px;
  --space-8:                32px;
  --space-10:               40px;
  --space-12:               48px;
  --space-14:               56px;
  --space-15:               60px;
  --space-20:               80px;
  --space-25:               100px;
  --space-31:               124px;

  /* ─── Layout ──────────────────────────────────────────────── */

  --max-width:              1200px;
  --page-padding-x:         60px;      /* horizontal padding on wrappers */
  --grid-gap:               24px;      /* standard grid/flex gap */
  --grid-gap-sm:            16px;

  /* ─── Borders ─────────────────────────────────────────────── */

  --border-radius:          0px;       /* flat design throughout */
  --border-width:           1px;

  /* ─── Shadows ─────────────────────────────────────────────── */

  --shadow-modal:           1px 1px 50px rgba(0, 0, 0, 0.28);

  /* ─── Breakpoints (reference only — use in media queries) ─── */
  /* --bp-tablet:  991px  */
  /* --bp-mobile:  767px  */
  /* --bp-small:   479px  */

}