/* =============================================================================
   tokens.css — design tokens as CSS custom properties
   Single source of truth for all raw design values.
   Do not use raw hex, rem, or px values outside this file.
   ============================================================================= */

:root {

  /* ---------------------------------------------------------------------------
     Typography
     Manrope is the only typeface used across the project.
     Loaded via Google Fonts (variable weight 200–800) in index.html.
     --------------------------------------------------------------------------- */

  --font-family-base: "Manrope", sans-serif;

  /* ---------------------------------------------------------------------------
     Colors
     Raw palette only. No semantic aliases at this stage.
     --------------------------------------------------------------------------- */

  /* Brand */
  --color-carbon:   #1A1A1A;
  --color-rose-400: #F47DAA;
  --color-white:    #FFFFFF;

  /* Neutral */
  --color-gray-50:  #D2D2D2;  /* lighter than gray-100 — used only for artwork titles, so they stand out slightly above the Grey 100 hierarchy (CTAs, metadata, dimensions) while staying below white page headings */
  --color-gray-100: #B8B8B8;
  --color-gray-200: #9E9E9E;
  --color-gray-300: #858585;
  --color-gray-400: #6B6B6B;
  --color-gray-500: #525252;

  /* Gradients
     --gradient-accent is used for secondary text (year, location, metadata).
     Applied via the .gradient-text utility class in globals.css.        */
  --gradient-accent: linear-gradient(135deg, var(--color-rose-400), var(--color-gray-200));

  /* ---------------------------------------------------------------------------
     Spacing — 4px base scale
     Do not use values outside this set without explicit approval.
     Token name reflects the pixel value for clarity.
     --------------------------------------------------------------------------- */

  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.5rem;   /* 56px */
  --space-16: 4rem;     /* 64px */
  --space-18: 4.5rem;   /* 72px */
  --space-24: 6rem;     /* 96px */

  /* ---------------------------------------------------------------------------
     Layout — Mobile
     Reference design width: 393px. Mobile-first.
     --------------------------------------------------------------------------- */

  --layout-margin:             var(--space-6);   /* 24px page-edge margin */
  --layout-header-height:      var(--space-18);  /* 72px fixed header     */
  --layout-page-title-height:  var(--space-18);  /* 72px page title zone  */

  /* ---------------------------------------------------------------------------
     Layout — Desktop
     Reference design width: 1440px.
     12-column grid | 72px outer margins | 24px gutters | 80px header.
     --------------------------------------------------------------------------- */

  --layout-desktop-width:          90rem;           /* 1440px max canvas     */
  --layout-desktop-margin:         var(--space-18); /* 72px outer margin — shared by .header-desktop (logo inset) and .site-sidebar (nav inset), see layout.css */
  --layout-desktop-gutter:         var(--space-6);  /* 24px column gutter    */
  --layout-desktop-columns:        12;              /* column count          */
  --layout-desktop-header-height:  5rem;            /* 80px fixed header     */
  --layout-desktop-sidebar-span:   2;              /* sidebar width: 2 cols */
  --layout-desktop-offset-span:    1;              /* empty offset: 1 col   */
  --layout-desktop-content-span:   9;              /* content area: 9 cols  */

  /* Sidebar/offset as literal widths, independent of grid-track math.
     .site-sidebar (position: fixed) uses sidebar-width directly; .content-area
     uses both to compute its margin-left. Derived from the spans above at the
     1440px reference: column = 86px, gutter = 24px.                        */
  --layout-desktop-sidebar-width:  12.25rem;        /* 196px = 2 cols + 1 gutter */
  --layout-desktop-offset-width:   5.375rem;        /* 86px = 1 col (empty gap)  */

}