/* NOTE this is recently added and eventually all html files and
 components should use it */

:root {
  /* ============================
     CONSOLIDATED DESIGN TOKENS
     Updated: Jan 2, 2026
     ============================ */

  /* Backgrounds - Surface Colors */
  --color-surface: #1d201f;              /* primary dark bg */
  --color-surface-elevated: #2a2a2a;     /* cards, modals, dropdowns */
  --color-surface-overlay: rgba(0,0,0,0.8); /* modal backdrops */

  /* Text Colors */
  --color-text-primary: #ffffff;
  --color-text-muted: #a8a5a0;           /* secondary text, labels */
  --color-text-disabled: #666666;        /* disabled states only */

  /* Accent Colors */
  --color-accent-cream: #E6D4C0;         /* buttons, UI chrome */
  --color-accent-gold: #e8a84c;          /* highlights, stars, badges */

  /* Feedback Colors */
  --color-feedback-error: #E53935;       /* destructive actions, errors */
  --color-feedback-success: #4CAF50;
  --color-favorite: #E53935;             /* heart icons */

  /* Interactive Colors */
  --color-link: #56aaff;                 /* interactive links */
  --color-info: #3a7dff;                 /* info states */

  /* ============================
     LEGACY ALIASES (for backwards compatibility)
     TODO: Migrate usages to new tokens
     ============================ */
  --primary-dark-color: var(--color-surface);
  --seconary-dark-color: var(--color-surface);
  --third-dark-color: var(--color-surface-elevated);
  --primay-light-color: var(--color-text-primary);
  --secondary-light-color: var(--color-text-muted);
  --light-blue-color: var(--color-info);
  --regular-blue-color: #3a4769;
  --light-red-color: var(--color-accent-cream);
  --light-gray-color: var(--color-text-disabled);
  --star-color: var(--color-accent-gold);
  --fav-color: var(--color-favorite);
  --success-color: var(--color-feedback-success);

  /* Typography */
  --font-display: 'Instrument Serif', serif;
  --font-header: 'Cormorant Garamond', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'Roboto Mono', monospace;

  /* Spacing - 4px Base Grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Legacy Spacing (keep for backwards compatibility) */
  --bigWhiteSpace: 100px;
  --mediumWhiteSpace: 50px;
  --smallWhiteSpace: 20px;
  --tinyWhiteSpace: 15px;
  --regular-font-size: 1em;
  --title-font-size: 18px;
  --default-border-radius: 10px;

  /*side nav*/
  --collapsed-nav-width: 72px;
  /* --uncollapsed-nav-width: calc(var(--collapsed-nav-width) + 170px); */
  --spacing-left: 1.66rem;
  --sidemenu-text-color: var(--color-text-muted);
  /* --allalbums-link-color: #00adef;
  --newalbum-link-color: #3ab54a;
  --starredalbums-link-color: #fcb040;
  --archivedalbums-link-color: #ed1b24; */

  --search-bar-max-width: 70%;
  --body-padding: 2rem;

  /* ============================
     Layout Contract - UI Consistency
     ============================ */
  /* Global Chrome - fixed navbar height */
  --global-chrome-height: 66px;  /* navbar min-height(50px) + padding */

  /* Content Plane - constant top offset for all image grids */
  --content-plane-top: calc(var(--global-chrome-height) + var(--mediumWhiteSpace));

  /* Mode Header - contextual headers like Image Map */
  --mode-header-height: 48px;
}




@media screen and (max-width: 810px) {
   :root{
    --search-bar-max-width: 31%
   }
}

@media screen and (max-width: 650px) {
  :root{
    --collapsed-nav-width: 40px;
    --body-padding: var(--tinyWhiteSpace);
    --mediumWhiteSpace: 30px;
    --title-font-size: 1em;
    --tinyWhiteSpace: 10px;
    --regular-font-size: 14px;
  }
}