/* ============================================================
   Evventio Design System — Tokens
   Colors, type, spacing, radii, shadows, motion.
   Page default: cream paper, aubergine ink, candlelit warmth.
   ============================================================ */

/* Fonts — Google Fonts (CDN). If you'd like to swap to paid
   editorial faces, change the @import and the --ev-font-* vars.
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Manrope:wght@300;400;500;600;700&family=Italianno&display=swap');

:root {
  /* ─── Colors ─────────────────────────────────────────────── */
  /* Primary */
  --ev-aubergine:      #3D1F2B;   /* anchor — deep romantic plum */
  --ev-aubergine-90:   #4F2D3A;
  --ev-aubergine-70:   #6D4D5A;
  --ev-aubergine-15:   rgba(61, 31, 43, 0.15);
  --ev-aubergine-08:   rgba(61, 31, 43, 0.08);

  --ev-cream:          #F4ECDF;   /* the page — warm parchment */
  --ev-paper:          #FBF7F0;   /* elevated cards on the page */
  --ev-cream-dark:     #EADFCB;   /* hairline / cream-on-cream borders */

  --ev-blush:          #E8C9C0;   /* soft dusty rose — buttons, blocks */
  --ev-blush-deep:     #D9A99E;   /* hover */

  /* Botanical accents */
  --ev-sage:           #7C8C75;   /* muted foliage green */
  --ev-sage-soft:      #B8C2B1;
  --ev-saffron:        #C68B3C;   /* warm Persian gold — used sparingly */
  --ev-saffron-deep:   #A06E2A;

  /* Foundation neutrals */
  --ev-ink:            #1A1213;   /* body text on cream */
  --ev-stone:          #9A8E83;   /* secondary text, captions */
  --ev-stone-soft:     #C7BFB5;   /* muted/disabled */

  /* Semantic */
  --ev-success:        var(--ev-sage);
  --ev-warning:        var(--ev-saffron);
  --ev-error:          #A33B3B;   /* a brick red, kept warm */
  --ev-info:           var(--ev-aubergine);

  /* Surfaces (semantic) */
  --bg-page:           var(--ev-cream);
  --bg-elevated:       var(--ev-paper);
  --bg-reverse:        var(--ev-aubergine);
  --bg-accent:         var(--ev-blush);

  /* Text (semantic) */
  --fg-1:              var(--ev-ink);          /* primary body */
  --fg-2:              var(--ev-aubergine);    /* display / headings */
  --fg-3:              var(--ev-stone);        /* secondary, captions, eyebrow */
  --fg-muted:          var(--ev-stone-soft);
  --fg-on-reverse:     var(--ev-cream);        /* text on aubergine */
  --fg-accent:         var(--ev-saffron-deep); /* italic flourish, dividers */

  /* Borders */
  --border-hair:       1px solid var(--ev-aubergine-15);
  --border-soft:       1px solid var(--ev-cream-dark);
  --border-accent:     1px solid var(--ev-saffron);

  /* ─── Typography ─────────────────────────────────────────── */
  --ev-font-display:   'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --ev-font-body:      'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ev-font-script:    'Italianno', 'Snell Roundhand', 'Apple Chancery', cursive;
  --ev-font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Base type sizes */
  --fs-display-xl:     clamp(56px, 8.5vw, 128px);   /* hero */
  --fs-display-l:      clamp(44px, 6vw, 88px);
  --fs-display-m:      clamp(32px, 4vw, 56px);
  --fs-display-s:      clamp(24px, 3vw, 36px);
  --fs-h1:             40px;
  --fs-h2:             32px;
  --fs-h3:             24px;
  --fs-h4:             20px;
  --fs-body-l:         18px;
  --fs-body:           16px;
  --fs-body-s:         14px;
  --fs-caption:        13px;
  --fs-eyebrow:        11px;

  /* Line heights */
  --lh-display:        1.05;
  --lh-tight:          1.2;
  --lh-body:           1.6;
  --lh-relaxed:        1.75;

  /* Tracking */
  --tr-display:        -0.015em;
  --tr-tight:          -0.01em;
  --tr-body:           0;
  --tr-loose:          0.04em;
  --tr-eyebrow:        0.18em;

  /* Weights */
  --fw-light:          300;
  --fw-regular:        400;
  --fw-medium:         500;
  --fw-semibold:       600;
  --fw-bold:           700;

  /* ─── Spacing scale (8px base) ───────────────────────────── */
  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           16px;
  --space-5:           24px;
  --space-6:           32px;
  --space-7:           48px;
  --space-8:           64px;
  --space-9:           96px;
  --space-10:          128px;
  --space-11:          192px;

  /* Page gutters */
  --gutter-mobile:     24px;
  --gutter-tablet:     64px;
  --gutter-desktop:    96px;
  --max-content:       1280px;

  /* ─── Radii (restrained) ─────────────────────────────────── */
  --radius-xs:         2px;
  --radius-sm:         4px;
  --radius-md:         6px;
  --radius-pill:       999px;     /* only for tag chips */

  /* ─── Shadows (two values only) ──────────────────────────── */
  --shadow-soft:       0 1px 2px rgba(61, 31, 43, 0.06),
                       0 8px 24px rgba(61, 31, 43, 0.05);
  --shadow-lift:       0 4px 16px rgba(61, 31, 43, 0.10),
                       0 24px 48px rgba(61, 31, 43, 0.08);

  /* ─── Motion ─────────────────────────────────────────────── */
  --ease-soft:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-micro:         200ms;
  --dur-content:       400ms;
  --dur-hero:          800ms;

  /* ─── Photographic protection vignette (sole gradient) ───── */
  --vignette-dark:     linear-gradient(180deg,
                          rgba(61, 31, 43, 0)   0%,
                          rgba(61, 31, 43, 0)  50%,
                          rgba(61, 31, 43, 0.55) 100%);
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--ev-font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display & headings — always serif, lean italic on hero moments */
.ev-display-xl,
.ev-display-l,
.ev-display-m,
.ev-display-s,
h1, h2, h3, h4 {
  font-family: var(--ev-font-display);
  color: var(--fg-2);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: var(--fw-regular);
  text-wrap: balance;
  margin: 0;
}

.ev-display-xl { font-size: var(--fs-display-xl); font-style: italic; font-weight: 400; }
.ev-display-l  { font-size: var(--fs-display-l);  font-style: italic; font-weight: 400; }
.ev-display-m  { font-size: var(--fs-display-m);  font-weight: 500; }
.ev-display-s  { font-size: var(--fs-display-s);  font-weight: 500; }

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-tight); font-weight: var(--fw-medium); }

/* Eyebrow / kicker — tracked-out caps */
.ev-eyebrow {
  font-family: var(--ev-font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--fw-medium);
}

/* Body type */
p, .ev-body {
  font-family: var(--ev-font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
}
.ev-body-l { font-size: var(--fs-body-l); line-height: var(--lh-relaxed); }
.ev-body-s { font-size: var(--fs-body-s); }
.ev-caption { font-size: var(--fs-caption); color: var(--fg-3); }

/* Script signature — for ONE moment per surface */
.ev-script {
  font-family: var(--ev-font-script);
  font-weight: 400;
  color: var(--fg-2);
  line-height: 1;
}

/* Italic editorial flourish — for pull-quotes, single accents */
.ev-italic {
  font-family: var(--ev-font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--fg-2);
}

/* Links — quiet underline, never colored */
a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ev-aubergine-15);
  transition: text-decoration-color var(--dur-micro) var(--ease-soft);
}
a:hover { text-decoration-color: var(--fg-2); }

/* ============================================================
   Components — minimal primitives
   ============================================================ */

/* Buttons */
.ev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--ev-font-body);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-soft),
              color var(--dur-micro) var(--ease-soft),
              border-color var(--dur-micro) var(--ease-soft),
              transform var(--dur-micro) var(--ease-soft);
  text-decoration: none;
}
.ev-btn--primary {
  background: var(--ev-aubergine);
  color: var(--ev-cream);
}
.ev-btn--primary:hover { background: var(--ev-aubergine-90); }
.ev-btn--primary:active { transform: translateY(1px); opacity: 0.92; }

.ev-btn--secondary {
  background: var(--ev-blush);
  color: var(--ev-aubergine);
}
.ev-btn--secondary:hover { background: var(--ev-blush-deep); }

.ev-btn--ghost {
  background: transparent;
  color: var(--ev-aubergine);
  border-color: var(--ev-aubergine-15);
}
.ev-btn--ghost:hover { border-color: var(--ev-aubergine); }

.ev-btn--link {
  background: transparent;
  color: var(--ev-aubergine);
  padding: 4px 0;
  border-radius: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--ev-aubergine-15);
}
.ev-btn--link:hover { text-decoration-color: var(--ev-aubergine); }

/* Inputs */
.ev-input,
.ev-textarea {
  display: block;
  width: 100%;
  font-family: var(--ev-font-body);
  font-size: var(--fs-body);
  color: var(--fg-1);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ev-aubergine-15);
  padding: 12px 0;
  transition: border-color var(--dur-micro) var(--ease-soft);
  border-radius: 0;
}
.ev-input:focus,
.ev-textarea:focus {
  outline: none;
  border-bottom-color: var(--ev-aubergine);
}
.ev-input::placeholder,
.ev-textarea::placeholder { color: var(--ev-stone-soft); }

.ev-label {
  display: block;
  font-family: var(--ev-font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--space-2);
  font-weight: var(--fw-medium);
}

/* Cards */
.ev-card {
  background: var(--bg-elevated);
  border: var(--border-hair);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  padding: var(--space-6);
  transition: box-shadow var(--dur-content) var(--ease-soft);
}
.ev-card:hover { box-shadow: var(--shadow-lift); }

/* Tag / chip */
.ev-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--ev-cream-dark);
  color: var(--ev-aubergine);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}

/* Hairline divider — saffron is the precious accent */
.ev-divider {
  border: 0;
  border-top: 1px solid var(--ev-aubergine-15);
  margin: var(--space-7) 0;
}
.ev-divider--saffron {
  border-top: 1px solid var(--ev-saffron);
  width: 48px;
  margin: var(--space-5) 0;
}

/* Selection */
::selection { background: var(--ev-blush); color: var(--ev-aubergine); }