/* ============================================================================
   Confetti Albums, DESIGN TOKENS (single source of truth)
   ----------------------------------------------------------------------------
   Change the brand here and it updates everywhere. Every other stylesheet
   references these variables, never hardcode a color, font, radius, or spacing.
   Design language + standards: docs/DESIGN.md.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* Body sans is Plus Jakarta Sans; display is Bricolage Grotesque. Both load from the @import above. */

:root {
  /* ── Brand palette ─────────────────────────────────────────────────
     Editorial + warm, not candy. Deepened, slightly desaturated rose with a
     refined metallic gold as a secondary accent. Used with restraint. */
  --brand:        #e64a2e;   /* persimmon, primary accent (Celebration) */
  --brand-dark:   #b23518;   /* deep persimmon, links / eyebrows / icons on light ground (AA) */
  --brand-light:  #fbe8e1;   /* soft peach wash, tinted fills */
  --gold:         #a9853f;   /* aged gold, secondary accent (use sparingly) */
  --gold-soft:    #efe4cb;

  /* ── Neutrals / surfaces ──────────────────────────────────────────
     Warm paper + espresso ink, the foundation of the editorial feel. */
  --bg:           #faf7f0;   /* app background, warm ivory */
  --cream:        #fbf7f0;   /* marketing background, warm ivory */
  --paper:        #fffdfb;   /* raised surface */
  --surface:      #ffffff;
  --border:       #ebe1d3;   /* warm hairline */
  --border-soft:  #f3ece0;
  --sidebar-bg:   #f4efe7;
  --header-bg:    #231a16;   /* warm espresso */
  --header-text:  #faf6ef;

  /* ── Text ──────────────────────────────────────────────────────────*/
  --ink:          #231a16;   /* warm near-black, headlines */
  --text:         #3a322c;   /* warm body */
  --text-muted:   #6e5f51;   /* warm taupe, secondary (>= AA on cream) */

  /* ── Accent aliases (app references these) → map to brand ───────────*/
  --accent:        var(--brand);
  --accent-light:  var(--brand-light);
  --accent-dark:   var(--brand-dark);

  /* ── Typography ────────────────────────────────────────────────────*/
  /* Body sans = Plus Jakarta Sans; display = Bricolage Grotesque (a bold modern grotesque, replaces
     the Fraunces serif whose ff/fi/fl ligatures rendered distorted). --font-serif keeps its name for
     compatibility but now points at the display sans. */
  --font-sans:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  /* Weight hierarchy (use these tokens, never raw numbers):
     normal 400 = body text; medium 500 = UI labels, nav, buttons, emphasis;
     semibold 600 = card titles / section subheads; bold 700 = section headings;
     extrabold 800 = big display headlines (bolder direction). */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* App-facing sizes kept at original values so the dense app layout is undisturbed; the large
     DISPLAY sizes are bumped up (bolder + bigger direction) for marketing editorial impact. */
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-base:14px;
  --fs-md:  16px;
  --fs-lg:  20px;
  --fs-xl:  34px;
  --fs-2xl: 50px;
  --fs-3xl: 78px;   /* editorial display (marketing) */
  --fs-display: 21px;  /* marketing sub-lead (was the bumped --fs-lg) */

  --leading-tight:  1.08;
  --leading-snug:   1.28;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;  /* large display */
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.14em;   /* eyebrows / small caps */

  /* ── Layout ────────────────────────────────────────────────────────*/
  --maxw: 1120px;

  /* ── Spacing scale ─────────────────────────────────────────────────*/
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;
  --space-7: 72px;
  --space-8: 112px;  /* section rhythm, generous whitespace reads premium */

  /* ── Radii (architectural, not bubbly) ─────────────────────────────*/
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ── Shadows (barely-there + warm-tinted; premium = restraint) ─────*/
  --shadow:    0 1px 2px rgba(33,26,22,0.04), 0 1px 3px rgba(33,26,22,0.05);
  --shadow-lg: 0 10px 34px rgba(33,26,22,0.09);
  --shadow-xl: 0 24px 70px rgba(33,26,22,0.16);
  --ring:      inset 0 0 0 1px var(--border);

  /* ── Immersive / rapid-tag dark panel ─────────────────────────────*/
  --rt-bg:      #1a1614;   /* darkest, image display + fullscreen overlay */
  --rt-surface: #251e1b;   /* slightly lifted, tag pane + bottom bar */

  /* ── Motion ────────────────────────────────────────────────────────*/
  --transition: 0.18s cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Crisp type rendering + sensible defaults wherever theme.css loads */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }