/* =============================================================================
   WIMB Archive — CSS Custom Properties
   Single source of truth for all design tokens.
   Source: brief/designs/colors_and_type.css
   ============================================================================= */

/* -----------------------------------------------------------------------------
   FONTS
   Suisse Int'l ships from /static/fonts/ (licensed, not versioned in git).
   ----------------------------------------------------------------------------- */

@font-face {
  font-family: "Suisse Int'l";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/SuisseIntl-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Suisse Int'l";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/SuisseIntl-Semibold.woff2") format("woff2");
}

/* weight:700 callers (used liberally in components) map to the Semibold cut */
@font-face {
  font-family: "Suisse Int'l";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/SuisseIntl-Semibold.woff2") format("woff2");
}


/* =============================================================================
   WIMB CANONICAL TOKENS
   All --wimb-* variables are the source of truth.
   Existing --color-* / --font-* / etc. names are bridged below for
   backward compatibility across existing components.
   ============================================================================= */

:root {

  /* ---------------------------------------------------------------------------
     BACKGROUNDS — descend through layered rooms of black
     --------------------------------------------------------------------------- */
  --wimb-bg-0:    rgb(13, 13, 13);   /* page / deepest body */
  --wimb-bg-1:    rgb(20, 20, 20);   /* header, footer, section panels */
  --wimb-bg-2:    rgb(28, 28, 28);   /* cards & inset blocks */
  --wimb-bg-rail: rgb(28, 28, 28);   /* search / utility bar */

  /* ---------------------------------------------------------------------------
     BORDERS — the entire UI is built on 1px lines
     --------------------------------------------------------------------------- */
  --wimb-line:        rgb(42, 42, 42);
  --wimb-line-strong: rgb(60, 60, 60);

  /* ---------------------------------------------------------------------------
     FOREGROUND / TEXT — warm-gray scale, cream-paper to deep clay
     --------------------------------------------------------------------------- */
  --wimb-fg-0: rgb(240, 236, 228);   /* cream — primary text, titles */
  --wimb-fg-1: rgb(218, 218, 218);   /* high-emphasis section heads */
  --wimb-fg-2: rgb(165, 164, 163);   /* body copy, secondary meta */
  --wimb-fg-3: rgb(138, 130, 122);   /* dim — disclaimers, ghost lists (WCAG AA: ≥4.5:1 on bg-0/1/2) */
  --wimb-fg-4: rgb(143, 129, 115);   /* clay — accents / small labels (WCAG AA: ≥4.5:1 on bg-0/1/2) */

  /* ---------------------------------------------------------------------------
     SHADOWS
     --------------------------------------------------------------------------- */
  --wimb-shadow-vinyl:
      5px   7px  19px 0 rgba(5,5,5,0.10),
      22px  27px 35px 0 rgba(5,5,5,0.09),
      49px  61px 47px 0 rgba(5,5,5,0.05),
      87px 108px 56px 0 rgba(5,5,5,0.01),
     136px 169px 61px 0 rgba(5,5,5,0.00);

  --wimb-hero-gradient: linear-gradient(rgba(0,0,0,0.68) 0%, rgb(13,13,13) 100%);

  /* ---------------------------------------------------------------------------
     RADII
     --------------------------------------------------------------------------- */
  --wimb-radius-xs:   3px;
  --wimb-radius-sm:   5px;
  --wimb-radius-md:   6px;
  --wimb-radius-lg:   10px;
  --wimb-radius-pill: 9999px;

  /* ---------------------------------------------------------------------------
     SPACING — 8-pt base with 4-pt half-step
     --------------------------------------------------------------------------- */
  --wimb-space-1:  4px;
  --wimb-space-2:  8px;
  --wimb-space-3:  12px;
  --wimb-space-4:  16px;
  --wimb-space-5:  24px;
  --wimb-space-6:  32px;
  --wimb-space-7:  48px;
  --wimb-space-8:  64px;
  --wimb-space-9:  96px;

  /* Horizontal gutter — used as section padding; responsive below */
  --wimb-gutter: 16px;

  /* ---------------------------------------------------------------------------
     TYPE FAMILIES
     --------------------------------------------------------------------------- */
  --wimb-font-sans:    "Suisse Int'l", "Suisse Neue", "Inter",
                       -apple-system, BlinkMacSystemFont, "Helvetica Neue",
                       Arial, sans-serif;
  --wimb-font-display: var(--wimb-font-sans);
  --wimb-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------------------------------------------------------------------------
     TYPE SCALE (px lock-step with Figma)
     --------------------------------------------------------------------------- */
  --wimb-fs-hero:    88px;   /* h1 landing claim */
  --wimb-fs-display: 32px;   /* h2 sub-claim */
  --wimb-fs-section: 22px;   /* h3 section heads */
  --wimb-fs-logo:    20px;   /* wordmark */
  --wimb-fs-body:    16px;   /* p, links, button labels */
  --wimb-fs-meta:    12px;   /* labels, captions, counts */

  /* LINE HEIGHTS */
  --wimb-lh-hero:    80px;
  --wimb-lh-display: 40px;
  --wimb-lh-section: 24px;
  --wimb-lh-body:    24px;
  --wimb-lh-meta:    16px;

  /* LETTER SPACING */
  --wimb-tracking-tight:   -0.020em;
  --wimb-tracking-snug:    -0.010em;
  --wimb-tracking-section:  0.040px;


  /* ==========================================================================
     BRIDGE — existing variable names → WIMB values
     All components that use --color-*, --font-*, --text-*, --spacing-* etc.
     automatically pick up the dark theme without any component edits.
     ========================================================================== */

  /* --- Backgrounds ---------------------------------------------------------- */
  --color-bg:          var(--wimb-bg-0);
  --color-bg-alt:      var(--wimb-bg-1);
  --color-bg-sunken:   var(--wimb-bg-2);
  --color-bg-overlay:  rgba(255, 255, 255, 0.04);

  /* --- Text ----------------------------------------------------------------- */
  --color-text:         var(--wimb-fg-0);
  --color-text-muted:   var(--wimb-fg-2);
  --color-text-faint:   var(--wimb-fg-3);
  --color-text-inverse: var(--wimb-bg-0);

  /* --- Borders -------------------------------------------------------------- */
  --color-border:        var(--wimb-line);
  --color-border-strong: var(--wimb-line-strong);

  /* --- Accent / interactive ------------------------------------------------- */
  --color-accent:        var(--wimb-fg-0);
  --color-accent-hover:  var(--wimb-fg-1);
  --color-accent-muted:  rgba(240, 236, 228, 0.08);

  /* --- Feedback (unchanged) ------------------------------------------------- */
  --color-success: #2d6a4f;
  --color-warning: #b5690a;
  --color-error:   #c0392b;

  /* --- Font families -------------------------------------------------------- */
  --font-body:    var(--wimb-font-sans);
  --font-mono:    var(--wimb-font-mono);

  /* --- Type scale (rem aliases — kept for existing components) -------------- */
  --text-xs:   0.75rem;    /*  12 px */
  --text-sm:   0.875rem;   /*  14 px */
  --text-base: 1rem;       /*  16 px */
  --text-lg:   1.125rem;   /*  18 px */
  --text-xl:   1.25rem;    /*  20 px */
  --text-2xl:  1.5rem;     /*  24 px */
  --text-3xl:  1.875rem;   /*  30 px */
  --text-4xl:  2.25rem;    /*  36 px */
  --text-5xl:  3rem;       /*  48 px */

  /* --- Weight / line-height / letter-spacing -------------------------------- */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.14em;

  /* --- Spacing (rem, 4 px base grid) ---------------------------------------- */
  --spacing-1:  0.25rem;   /*  4 px */
  --spacing-2:  0.5rem;    /*  8 px */
  --spacing-3:  0.75rem;   /* 12 px */
  --spacing-4:  1rem;      /* 16 px */
  --spacing-5:  1.25rem;   /* 20 px */
  --spacing-6:  1.5rem;    /* 24 px */
  --spacing-8:  2rem;      /* 32 px */
  --spacing-10: 2.5rem;    /* 40 px */
  --spacing-12: 3rem;      /* 48 px */
  --spacing-16: 4rem;      /* 64 px */
  --spacing-20: 5rem;      /* 80 px */
  --spacing-24: 6rem;      /* 96 px */

  --spacing-xs: var(--spacing-1);
  --spacing-sm: var(--spacing-2);
  --spacing-md: var(--spacing-4);
  --spacing-lg: var(--spacing-8);
  --spacing-xl: var(--spacing-16);

  /* --- Layout --------------------------------------------------------------- */
  --max-width-content: 1100px;
  --max-width-prose:   680px;
  --max-width-narrow:  480px;
  --page-gutter:       var(--wimb-gutter);

  /* --- Borders —radius + width ---------------------------------------------- */
  --radius-sm:   var(--wimb-radius-xs);   /* 3px */
  --radius-md:   var(--wimb-radius-md);   /* 6px */
  --radius-lg:   var(--wimb-radius-lg);   /* 10px */
  --radius-xl:   20px;
  --radius-full: var(--wimb-radius-pill); /* 9999px */
  --border-width: 1px;

  /* --- Shadows -------------------------------------------------------------- */
  --shadow-sm: 0 1px 3px  rgba(0, 0, 0, 0.25);
  --shadow-md: 0 3px 10px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.50);

  /* --- Transitions ---------------------------------------------------------- */
  --duration-fast:   120ms;
  --duration-normal: 220ms;
  --duration-slow:   380ms;
  --easing:          cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Cover art standard sizes --------------------------------------------- */
  --cover-size-sm: 72px;
  --cover-size-md: 160px;
  --cover-size-lg: 300px;

  /* --- Z-index ladder ------------------------------------------------------- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-sticky:    50;
  --z-dropdown: 100;
  --z-overlay:  500;
  --z-modal:   1000;
}


/* =============================================================================
   RESPONSIVE GUTTER
   Drives both --wimb-gutter (used in WIMB components) and --page-gutter
   (used in legacy components via the bridge above).
   ============================================================================= */

@media (min-width: 640px) {
  :root { --wimb-gutter: 24px; }
}

@media (min-width: 1024px) {
  :root { --wimb-gutter: 32px; }
}

@media (min-width: 1280px) {
  :root { --wimb-gutter: 48px; }
}


/* =============================================================================
   WIMB SHARED LABEL UTILITIES
   ============================================================================= */

/* Metadata / hero subtitle line — 14px, dim, snug tracking, normal weight.
   Used for hero eyebrow lines ("The archive · all records") and stat labels. */
.wimb-meta-label {
  font-size: 14px;
  color: var(--wimb-fg-3);
  letter-spacing: var(--wimb-tracking-snug);
}

/* CTA / closing label — 12px, dim, snug tracking, normal weight.
   Used for "Continue in the archive" lines and album hero metadata. */
.wimb-cta-label {
  font-size: 12px;
  color: var(--wimb-fg-3);
  letter-spacing: var(--wimb-tracking-snug);
}