/* =============================================================================
   GABELICH GALLERY — DESIGN TOKENS
   Drop-in CSS custom properties extracted from the production stylesheets.
   Import this first, before any component or page CSS.

   Usage:  <link rel="stylesheet" href="design-tokens.css">
   or:     @import "design-tokens.css";
   ============================================================================= */

:root {

  /* ---- TYPEFACES ----------------------------------------------------------
     Two families do all the work. Wire the real .otf files via @font-face
     (see fonts/ note in README) — these var names are what the whole system
     references, so keep them exactly.
     ROLE RULE:
       Gerstner Programm  = labels, headings, numbers, buttons, UI  (grotesque)
       JHA Times Now      = serif sub-lines, descriptions, body, italics
  ------------------------------------------------------------------------- */
  --font-gerstner-programm: "Gerstner Programm", "Helvetica Neue", Arial, sans-serif;
  --font-jha-times-now: "JHA Times Now", "Times New Roman", Georgia, serif;

  /* ---- COLOUR -------------------------------------------------------------
     The system is almost entirely black on white. Dark surfaces (hero, etc.)
     invert via mix-blend-mode: difference on logos rather than colour swaps.
  ------------------------------------------------------------------------- */
  --color-ink: #000000;          /* primary text / hairlines on light       */
  --color-paper: #ffffff;        /* primary background                      */
  --color-hair: #000000;         /* hairline rule colour                    */
  --color-border-soft: #dedede;  /* button + custom-cursor border           */
  --color-border-soft-2: #cfcfcf;/* inactive slider dot                     */
  --color-media-placeholder: #f5f5f5; /* image/video bg before load (and #f2f2f2 in sliders) */
  --color-overlay: rgba(0,0,0,0.70);  /* hover overlay on project cards     */
  --color-wash: rgba(0,0,0,0.05);     /* button hover background            */

  /* ---- LAYOUT / CONTAINER -------------------------------------------------
     Two widths matter: the outer page container (1440) and the narrower
     centred text/heading column (1202).
  ------------------------------------------------------------------------- */
  --maxw-container: 1440px;      /* outer page container                    */
  --maxw-text: 1202px;           /* centred heading / statement column      */
  --maxw-media: 890px;           /* hero + background-logo SVG cap           */
  --maxw-small-desc: 507px;      /* small description column                */
  --pad-desktop: 40px;           /* container side padding (desktop)        */
  --pad-mobile: 12px;            /* container side padding (mobile)         */

  /* ---- HAIRLINES ----------------------------------------------------------
     0.5px is the fine editorial rule (accordion). 1px is used on news/grid
     dividers and button borders.
  ------------------------------------------------------------------------- */
  --hair-fine: 0.5px;
  --hair: 1px;

  /* ---- TYPE SCALE ---------------------------------------------------------
     Desktop sizes with their paired line-heights. Mobile overrides noted in
     the guide. Sizes are the real values pulled from the stylesheets.
  ------------------------------------------------------------------------- */
  --fs-display: 60px;    --lh-display: 60px;   /* big statement headings (Gerstner) + serif sub */
  --fs-xl: 40px;         --lh-xl: 40px;        /* text-extra-large                              */
  --fs-large: 34px;      --lh-large: 36px;     /* big descriptions / italic mission (JHA)       */
  --fs-mid: 20px;        --lh-mid: 22px;       /* sub-labels, titles, small descriptions        */
  --fs-body: 18px;       --lh-body: 20px;      /* item descriptions (JHA)                       */
  --fs-meta: 14px;       --lh-meta: 14px;      /* dates, numbers, sub-cats                       */
  --fs-ui: 12px;         --lh-ui: 12px;        /* buttons, custom cursor, captions               */

  /* ---- SPACING (recurring gaps) ------------------------------------------- */
  --gap-section: 60px;   /* statement / curation vertical rhythm             */
  --gap-stack-lg: 100px; /* artists-content large stack gap                  */
  --gap-row: 40px;       /* common grid/flex gap                             */
  --gap-card: 30px;      /* inside slider items                              */

  /* ---- MOTION ------------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.12s;     /* follow-image opacity                             */
  --dur-base: 0.2s;      /* button / hover                                   */
  --dur-mid: 0.3s;       /* accordion / mobile track                         */
  --dur-cross: 0.42s;    /* grid image crossfade                             */

  /* ---- RADII -------------------------------------------------------------- */
  --radius-pill: 10px;   /* buttons + custom cursor                          */
  --radius-media: 0;     /* images are square-cornered                       */

  /* ---- SIGNATURE COMPONENT DIMENSIONS ------------------------------------- */
  --cursor-w: 157px;     --cursor-h: 20px;     /* custom pill cursor          */
  --follow-img-w: 238px; --follow-img-h: 314px;/* cursor-follow image (artists)*/
  --slider-item-min: 426px;                    /* drag-slider card min width  */
  --slider-media-w: 426px; --slider-media-h: 560px; /* bespoke item image      */
  --grid-aspect: 0.75 / 1;                     /* artwork grid cell aspect    */
  --card-aspect: 3 / 4;                        /* slider media aspect          */
  --bg-aspect: 1.47 / 1;                       /* background-image section     */
}