/* ============================================================
   THEME 07 — Curated Editorial
   ============================================================
   v2 — locked 2026-05-25.
   Brand-authentic palette extracted from tenant 2 (Анна-мистецтвознавець)
   webflow site: klyuch-do-mistectva.webflow.io
   Plus visual patterns from museum-art-curation + editorial-storytelling refs:
     - Museum App Uffizi Redesign (glass-on-art + cream paper info-card)
     - Prado Museum (charcoal museum-wall + serif italic over photos)
     - Fior di Vigna (Italian luxury oxblood + cream + cinematic photos)
     - Margin / Alimento (cream paper + serif italic + accent highlights)
     - NICKELFOX Renaissance + THE GALLERY auction (warm sepia / honey amber)
   Sub-niche: art curation, museum, gallery, fine art collection,
              literary, philosophy, premium therapy, slow culture,
              cinematic travel, photography schools, contemplative wellness.
   ============================================================ */

/* ============ ANNA'S BRAND FONTS (local, no hotlink) ============ */

@font-face {
  font-family: 'Fixel Display';
  font-weight: 300;
  font-style: normal;
  src: url('./fonts/FixelDisplay-Light.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Fixel Display';
  font-weight: 400;
  font-style: normal;
  src: url('./fonts/FixelDisplay-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Fixel Display';
  font-weight: 500;
  font-style: normal;
  src: url('./fonts/FixelDisplay-Medium.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Fixel Display';
  font-weight: 600;
  font-style: normal;
  src: url('./fonts/FixelDisplay-SemiBold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Lighthaus';
  font-weight: 400;
  font-style: normal;
  src: url('./fonts/Lighthaus.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Florisel Script';
  font-weight: 400;
  font-style: normal;
  src: url('./fonts/FloriselScript.ttf') format('truetype');
  font-display: swap;
}

:root[data-theme="curated-editorial"] {

  /* ============================================================
     ANNA'S EXACT PALETTE (extracted from her webflow course site)
     ============================================================ */

  /* -- CREAM BACKGROUNDS — three warm ivory levels --------- */
  --bg-base:                  #ece2d7;  /* main cream paper — Anna's primary bg */
  --bg-elevated:              #f5eacd;  /* champagne — elevated cards */
  --bg-warm-sand:             #ead6a3;  /* warm sand — secondary blocks */
  --bg-deep:                  #1a0a0e;  /* deep wine-charcoal — for hero contrast */
  --bg-paper:                 var(--bg-base);

  /* -- BRAND — deep oxblood/forest green premium ------- */
  /* Anna uses oxblood for deep emphasis, forest green for premium accent */
  --brand:                    #520016;  /* deep oxblood — Anna's deepest */
  --brand-bright:             #7a1f2a;
  --brand-deep:               #35151d;  /* wine — medium dark */
  --brand-soft:               rgba(82, 0, 22, 0.08);
  --brand-glow:               rgba(82, 0, 22, 0.18);

  --premium:                  #032320;  /* forest green — surprise premium accent */
  --premium-bright:            #0d3a35;
  --premium-soft:             rgba(3, 35, 32, 0.08);

  /* -- PAID (CTA) — coral red, Anna's button color ----- */
  --paid:                     #ea384c;
  --paid-hover:               #d12a3e;
  --paid-soft:                rgba(234, 56, 76, 0.10);
  --paid-deep:                #b51e30;

  /* -- ACCENTS — soft pink range ------------------------- */
  --accent-blush:             #ffdede;  /* pale pink blush — hover/highlight */
  --accent-pink:              #f276a0;  /* salmon — decorative accent */
  --accent-pink-soft:         rgba(242, 118, 160, 0.14);

  /* -- SEMANTIC -------------------------------------------- */
  --success:                  #6b8e6e;  /* muted sage — museum-friendly */
  --warning:                  #c8924d;  /* amber */
  --error:                    var(--paid-deep);

  /* -- TEXT — wine-tinted darks (NOT pure black) -------- */
  --text:                     #35151d;  /* wine — main text on cream */
  --text-soft:                #52303a;
  --text-muted:               rgba(53, 21, 29, 0.65);
  --text-dim:                 rgba(53, 21, 29, 0.42);
  --text-cream:               #ece2d7;  /* cream for text on dark bg */
  --text-cream-muted:         rgba(236, 226, 215, 0.70);
  --text-cream-dim:           rgba(236, 226, 215, 0.45);

  /* -- HAIRLINES — warm tinted ---------------------------- */
  --hairline:                 rgba(53, 21, 29, 0.12);
  --hairline-strong:          rgba(53, 21, 29, 0.22);
  --hairline-cream:           rgba(236, 226, 215, 0.16);
  --hairline-cream-strong:    rgba(236, 226, 215, 0.30);
  --border-warm:              rgba(53, 21, 29, 0.10);

  /* ============================================================
     RADIUS — square / arched / pill (NO ovals — that was wrong)
     ============================================================ */
  --radius-sharp:             4px;
  --radius-soft:              12px;
  --radius-medium:            18px;
  --radius-card:              16px;
  --radius-pill:              999px;
  --radius-button:            999px;       /* filled pill — Anna's style */
  --radius-input:             10px;
  --radius-arch-top:          200px 200px 0 0;  /* arched top (Renaissance ref) */
  --radius-md:                var(--radius-medium);
  --radius-tag:               999px;

  /* ============================================================
     SHADOWS — soft museum-lit
     ============================================================ */
  --shadow-card:
    0 1px 2px rgba(53, 21, 29, 0.04),
    0 8px 24px -12px rgba(53, 21, 29, 0.12);

  --shadow-card-elevated:
    0 2px 4px rgba(53, 21, 29, 0.06),
    0 20px 50px -16px rgba(53, 21, 29, 0.18);

  --shadow-photo:
    0 0 0 1px rgba(53, 21, 29, 0.05),
    0 20px 50px -16px rgba(0, 0, 0, 0.45);

  --shadow-glow-coral:
    0 8px 24px rgba(234, 56, 76, 0.30);

  --backdrop-blur:            blur(20px) saturate(140%);
  --backdrop-blur-strong:     blur(32px) saturate(160%);

  /* ============================================================
     TYPOGRAPHY — Anna's exact stack
     ============================================================ */

  /* Fixel Display = Ukrainian foundry sans, Cyrillic-optimized
     Lighthaus = serif display (custom from Anna's site)
     Florisel Script = handwritten script for decorative emphasis */

  --font-display:             'Lighthaus', 'Cormorant Garamond', Georgia, serif;
  --font-body:                'Fixel Display', 'Inter', system-ui, sans-serif;
  --font-script:              'Florisel Script', 'Pinyon Script', cursive;
  --font-mono:                'JetBrains Mono', 'Courier New', monospace;

  /* Display sizes — editorial scale */
  --type-display-xl:          48px;
  --type-display-lg:          36px;
  --type-display-md:          26px;
  --type-script-accent:       42px;       /* for Florisel handwritten accents */
  --type-heading:             19px;
  --type-eyebrow:             11px;
  --type-body:                15px;
  --type-meta:                12px;
  --type-caption:             12px;
  --type-micro:               10px;
  --type-numeral-huge:        72px;

  /* Weights — Fixel range */
  --weight-light:             300;
  --weight-regular:           400;
  --weight-medium:            500;
  --weight-semi:              600;

  --leading-tight:            1.05;
  --leading-snug:             1.20;
  --leading-normal:           1.55;
  --leading-loose:            1.75;

  --tracking-tight:           -0.018em;
  --tracking-normal:          0;
  --tracking-caps:            0.10em;
  --tracking-caps-wide:       0.16em;
  --tracking-eyebrow:         0.20em;

  --dim-caps-opacity:         0.50;

  /* ============================================================
     SPACING — editorial breathing
     ============================================================ */
  --space-1:                  4px;
  --space-2:                  8px;
  --space-3:                  12px;
  --space-4:                  20px;
  --space-5:                  28px;
  --space-6:                  36px;
  --space-8:                  52px;
  --space-10:                 72px;
  --space-12:                 96px;
  --space-16:                 128px;

  /* ============================================================
     MOTION — slow, contemplative gallery-walk
     ============================================================ */
  --transition-fast:          200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:          350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:          600ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:                 cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:              cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================================
     AMBIENT — soft warm light overlays
     ============================================================ */
  --ambient-top:
    radial-gradient(80% 40% at 50% 0%, rgba(82, 0, 22, 0.04), transparent 70%);
  --ambient-bottom:
    radial-gradient(80% 60% at 50% 100%, rgba(82, 0, 22, 0.03), transparent 60%);
  --ambient-photo-cream:
    radial-gradient(circle at 50% 100%, rgba(53, 21, 29, 0.35) 0%, transparent 70%);
  --ambient-photo-dark:
    linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.55) 100%);

  /* ============================================================
     DECORATIVE — quotation marks, plus signs (NO asterisks)
     Anna uses « » quotation guillemets per ref note
     ============================================================ */
  --guillemet-color:          var(--brand);
  --decoration-plus-color:    var(--brand);

  /* ============================================================
     ICONS — outline thin
     ============================================================ */
  --icon-stroke-width:        1.5;
  --icon-color:               var(--text);
  --icon-color-cream:         var(--text-cream);
  --icon-size-sm:             16px;
  --icon-size-md:             20px;
  --icon-size-lg:             24px;

  /* ============================================================
     TAP TARGET
     ============================================================ */
  --tap-min:                  44px;
}

/* =========================================================
   APPLY BASE
   ========================================================= */

html[data-theme="curated-editorial"],
body[data-theme="curated-editorial"] {
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   BUTTON variants — filled pill, Anna's coral CTA pattern
   Uppercase + tracking — like "ЗАБРАТИ СВІЙ КЛЮЧ"
   ========================================================= */

[data-theme="curated-editorial"] .btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 32px;
  background: var(--paid);
  color: #fff;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 12px;
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
  box-shadow: var(--shadow-glow-coral);
}

[data-theme="curated-editorial"] .btn-cta:hover {
  background: var(--paid-hover);
  transform: translateY(-1px);
}

[data-theme="curated-editorial"] .btn-cta:active {
  transform: translateY(0);
}

/* Dark filled pill (for cream surfaces — Margin / Uffizi pattern) */
[data-theme="curated-editorial"] .btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 28px;
  background: var(--brand-deep);
  color: var(--text-cream);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 12px;
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: all var(--transition-base);
}

[data-theme="curated-editorial"] .btn-dark:hover {
  background: var(--brand);
}

/* Cream-on-dark pill (for charcoal Museum mode) */
[data-theme="curated-editorial"] .btn-cream {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 28px;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 12px;
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: all var(--transition-base);
}

/* Tag / chip pill */
[data-theme="curated-editorial"] .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--brand-soft);
  border: 1px solid var(--hairline-strong);
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-medium);
  border-radius: var(--radius-pill);
}

/* =========================================================
   TYPOGRAPHY classes — Anna's stack
   ========================================================= */

[data-theme="curated-editorial"] .t-display-xl {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--type-display-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

[data-theme="curated-editorial"] .t-display-lg {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--type-display-lg);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

[data-theme="curated-editorial"] .t-display-md {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--type-display-md);
  line-height: var(--leading-snug);
}

[data-theme="curated-editorial"] .t-script {
  font-family: var(--font-script);
  font-weight: var(--weight-regular);
  font-size: var(--type-script-accent);
  line-height: 1.0;
  color: var(--brand);
}

[data-theme="curated-editorial"] .t-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

[data-theme="curated-editorial"] .t-numeral-huge {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--type-numeral-huge);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

[data-theme="curated-editorial"] .t-heading {
  font-family: var(--font-body);
  font-weight: var(--weight-semi);
  font-size: var(--type-heading);
  line-height: var(--leading-snug);
  color: var(--text);
}

[data-theme="curated-editorial"] .t-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--type-body);
  line-height: var(--leading-normal);
  color: var(--text-soft);
}

[data-theme="curated-editorial"] .t-meta {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--type-meta);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Italic emphasis on specific words (Fior di Vigna pattern) */
[data-theme="curated-editorial"] em.emphasis {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  color: var(--brand);
}

/* Script handwritten accent (Alimento pattern) */
[data-theme="curated-editorial"] em.script {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: var(--weight-regular);
  color: var(--brand);
  font-size: 1.4em;
  line-height: 0.9;
}

/* =========================================================
   PHOTO TREATMENT — square or arched, never oval
   ========================================================= */

[data-theme="curated-editorial"] .photo-rect {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--brand-deep);
}

[data-theme="curated-editorial"] .photo-arch {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-arch-top);
  background: var(--brand-deep);
}

[data-theme="curated-editorial"] .photo-square {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sharp);
  background: var(--brand-deep);
}

[data-theme="curated-editorial"] .photo-fullbleed {
  position: relative;
  overflow: hidden;
  background: var(--brand-deep);
}

/* Soft dark gradient at bottom of photo for text overlay legibility */
[data-theme="curated-editorial"] .photo-fade-bottom::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ambient-photo-dark);
  pointer-events: none;
}

/* =========================================================
   GUILLEMET QUOTE MARKS — Anna's signature
   « » around emphasized terms
   ========================================================= */

[data-theme="curated-editorial"] .guillemet::before { content: '«'; color: var(--brand); margin-right: 2px; }
[data-theme="curated-editorial"] .guillemet::after  { content: '»'; color: var(--brand); margin-left: 2px; }

/* =========================================================
   DECORATIVE PLUS (Fior di Vigna ref)
   ========================================================= */

[data-theme="curated-editorial"] .plus-mark {
  display: inline-block;
  color: var(--brand);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: 1.2em;
  line-height: 0;
  opacity: 0.7;
}

/* =========================================================
   HAIRLINE divider
   ========================================================= */

[data-theme="curated-editorial"] hr.hairline {
  height: 1px;
  background: var(--hairline);
  border: none;
  margin: var(--space-4) 0;
}