/* CSS Variables — Single Source of Truth */

:root {
  /* Backgrounds */
  --color-bg:        #f9f7f5;   /* sand/warm off-white — main page background */
  --color-dark:      #1c1c1c;   /* near-black — text, dark backgrounds */

  /* Accent */
  --color-accent:    #e1ee66;   /* chartreuse yellow — hover underlines, highlights */

  /* Derived / utility */
  --color-text:      var(--color-dark);
  --color-border:    rgba(28, 28, 28, 0.12);
  --color-overlay:   rgba(28, 28, 28, 0.5);

  /* Typography */
  --font-heading:    'Cormorant Garamond', Georgia, serif;
  --font-body:       'Space Grotesk', sans-serif;
  --font-menu:       'Space Grotesk', sans-serif;

  /* Spacing scale (8px base) */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   18px;
  --space-lg:   46px;
  --space-xl:   80px;
  --space-xxl:  120px;

  /* Layout */
  --max-width:       1440px;
  --gutter:          48px;
  --header-height:   72px;

  /* Transitions */
  --ease-elegant:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   200ms;
  --duration-base:   350ms;
  --duration-slow:   600ms;

  /* Off-canvas */
  --offcanvas-width: 420px;

  /* Cursor */
  --cursor-size:     8px;

  /* Button variables */
  --btn-primary-bg:        var(--color-dark);
  --btn-primary-text:      var(--color-bg);
  --btn-primary-border:    var(--color-dark);

  --btn-secondary-bg:       transparent;
  --btn-secondary-text:     var(--color-text);
  --btn-secondary-border:   var(--color-text);

  /* Sidebar / off-canvas */
  --sidebar-bg:      var(--color-bg);
  --sidebar-text-color: var(--color-text);
  --nav-logo-size:   28px;
  --color-menu:      var(--color-text);
  --sidebar-menu-font:       'Space Grotesk', sans-serif;
  --sidebar-menu-weight:     300;
  --sidebar-menu-size:       1em;
  --sidebar-menu-line-height: 1.5;
  --sidebar-menu-spacing:    18px;
  --sidebar-menu-align:      left;
  --sidebar-menu-align-flex: flex-start;

  --sidebar-footer-font:       'Space Grotesk', sans-serif;
  --sidebar-footer-weight:     300;
  --sidebar-footer-size:       1em;
  --sidebar-footer-line-height: 1.5;
  --sidebar-footer-spacing:    0.35em;
  --sidebar-footer-align:      left;
  --sidebar-footer-align-flex: flex-start;

  /* Footer */
  --line-height-footer: 1.5;
  --footer-line-spacing: 0.35em;
  --footer-align: left;
  --footer-align-flex: flex-start;
  --footer-underline-color: var(--color-accent);

  /* Button sizing */
  --btn-font-size:   1em;
  --btn-padding:     12px 32px;

  /* Gallery */
  --gallery-image-radius: 0px;
  --gallery-columns: 3;
  --gallery-gap:     24px;
  --gallery-mode:    masonry; /* masonry | scattered */
  --gallery-scatter-intensity: 10; /* for scattered layout */
  --gallery-title-font: 'Cormorant Garamond', Georgia, serif;
  --gallery-title-size: 2.25em;
  --gallery-title-weight: 400;
  --gallery-title-color: var(--color-dark);
  --gallery-title-bg: transparent;
  --gallery-title-padding: 0px;
  --gallery-title-radius: 0px;
  --gallery-category-font: 'Space Grotesk', sans-serif;
  --gallery-category-size: 0.81em;
  --gallery-category-weight: 400;
  --gallery-category-color: var(--color-dark);
  --gallery-category-bg: transparent;
  --gallery-category-padding: 0px;
  --gallery-category-radius: 0px;

  /* Overlay shared by lightbox and offcanvas backdrop */
  --overlay-bg: rgba(28, 28, 28, 0.88);

  /* Page Headings (applies to all non-home page titles + descriptions) */
  --page-heading-font: 'Cormorant Garamond', Georgia, serif;
  --page-heading-weight: 300;
  --page-heading-size: 6em;
  --page-heading-color: #1c1c1c;
  --page-heading-align: left;
  --page-heading-align-flex: flex-start;
  --page-desc-font: 'Space Grotesk', sans-serif;
  --page-desc-weight: 400;
  --page-desc-size: 1.125em;
  --page-desc-line-height: 1.6;
  --page-desc-color: #777777;
  --page-heading-desc-gap: 16px;

  /* Articles Listing typography */
  --articles-heading-font: 'Cormorant Garamond', Georgia, serif;
  --articles-heading-weight: 400;
  --articles-heading-size: 1.25em;
  --articles-heading-line-height: 1.3;
  --articles-heading-color: var(--color-text);
  --articles-meta-font: 'Space Grotesk', sans-serif;
  --articles-meta-weight: 500;
  --articles-meta-size: 0.75em;
  --articles-meta-color: #888888;

  /* Single Post typography */
  --post-title-font: 'Cormorant Garamond', Georgia, serif;
  --post-title-weight: 300;
  --post-title-size: 3em;
  --post-title-line-height: 1.1;
  --post-title-color: var(--color-text);
  --post-meta-font: 'Space Grotesk', sans-serif;
  --post-meta-size: 0.75em;
  --post-meta-color: #888888;
  --post-body-font: 'Space Grotesk', sans-serif;
  --post-body-weight: 400;
  --post-body-size: 1.125em;
  --post-body-line-height: 1.8;
  --post-body-color: var(--color-text);
  --post-h2-font: 'Cormorant Garamond', Georgia, serif;
  --post-h2-weight: 300;
  --post-h2-size: 1.75em;
  --post-h2-line-height: 1.2;
  --post-h2-color: #1c1c1c;

  /* Base font sizes */
  --font-size-base:  1em;
  --font-size-sm:    0.875em;
  --font-size-lg:    1.25em;
  --font-size-xl:    2em;
  --font-size-xxl:   4em;
  --font-size-menu:  1em;
  --font-size-sidebar: 1em;
  --font-size-footer: 0.81em;
  --line-height-header: 1.2;

  /* Line heights */
  --line-height-tight:   1.2;
  --line-height-base:    1.6;
  --line-height-loose:   1.8;

  /* Letter spacing */
  --letter-spacing-tight:  -0.02em;
  --letter-spacing-base:   0;
  --letter-spacing-loose:  0.05em;
}