/* Eventi Vino Milano — stylesheet unico (token + base) */

/* Eventi Vino Milano — Color system
   Foundation: Lovable's warm, opacity-driven neutral system (cream + charcoal).
   Accents: keyed to the logo's watercolour rosé palette. */
:root {
  /* ---- Core surfaces & ink ---- */
  --cream: #f7f4ed;            /* page background, card surfaces — the brand warmth */
  --off-white: #fcfbf8;        /* text on dark, subtle highlight */
  --charcoal: #1c1c1c;         /* primary ink, dark surfaces (not pure black) */

  /* ---- Opacity-driven neutral scale (all derived from charcoal) ---- */
  --ink-100: #1c1c1c;                    /* headings, primary text */
  --ink-83: rgba(28, 28, 28, 0.83);      /* strong secondary text */
  --ink-82: rgba(28, 28, 28, 0.82);      /* body copy */
  --ink-muted: #5f5f5d;                  /* captions, descriptions, meta */
  --ink-40: rgba(28, 28, 28, 0.4);       /* interactive borders */
  --ink-04: rgba(28, 28, 28, 0.04);      /* subtle hover tint */
  --ink-03: rgba(28, 28, 28, 0.03);      /* barely-there overlay */

  /* ---- Borders & dividers ---- */
  --border-subtle: #eceae4;              /* passive: cards, images, dividers */
  --border-interactive: rgba(28, 28, 28, 0.4); /* active: outline buttons, inputs on focus */

  /* ---- Brand accents (from the logo) ---- */
  --vino: #eb2877;             /* signature magenta — the "vino" wordmark */
  --vino-strong: #c81c62;      /* darker magenta for text on cream (AA) & hovers */
  --vino-soft: #f9d4e2;        /* pale magenta tint — badges, hover fills */
  --rose: #fb9ea4;             /* watercolour rosé — the glass */
  --rose-soft: #fde4e6;        /* pale rosé wash */
  --lavender: #dfcadd;         /* soft lilac brush accent */
  --lavender-soft: #f0e7ef;
  --gold: #fff5ca;             /* pale champagne-yellow brush accent */
  --gold-soft: #fffaea;

  /* ---- Focus / interactive ---- */
  --ring: rgba(235, 40, 119, 0.45);      /* brand-keyed focus ring (was Tailwind blue) */

  /* ---- Semantic aliases ---- */
  --bg-page: var(--cream);
  --surface-card: var(--cream);
  --surface-raised: var(--off-white);
  --text-primary: var(--ink-100);
  --text-body: var(--ink-82);
  --text-secondary: var(--ink-83);
  --text-muted: var(--ink-muted);
  --text-on-dark: var(--off-white);
  --text-accent: var(--vino-strong);
  --border: var(--border-subtle);
  --border-strong: var(--border-interactive);
  --accent: var(--vino);
  --accent-hover: var(--vino-strong);

  /* ---- Status (kept warm-neutral / restrained) ---- */
  --success: #4a7a4f;
  --warning: #b07a2e;
  --danger: #b3402f;
}


/* Eventi Vino Milano — Typography
   Camera Plain Variable is Lovable's proprietary font (unavailable).
   Substituted with Hanken Grotesk — a warm humanist grotesque with rounded
   terminals and a strong display presence. FLAGGED: swap for Camera Plain if licensed. */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: var(--font-sans);

  /* Weights — narrow by design: 400 body/UI, 500 special, 600 headings. Never 700+. */
  --fw-regular: 400;   /* @kind font */
  --fw-medium: 500;    /* @kind font */
  --fw-display: 480;   /* @kind font */
  --fw-semibold: 600;  /* @kind font */

  /* Type scale (px → rem @16) with paired line-height & tracking.
     Letter-spacing compresses with size: -1.5px @60 → normal @16. */
  --fs-hero: 3.75rem;      /* 60px */
  --lh-hero: 1.05;         /* @kind font */
  --ls-hero: -1.5px;       /* @kind font */

  --fs-h1: 3rem;           /* 48px */
  --lh-h1: 1.0;            /* @kind font */
  --ls-h1: -1.2px;         /* @kind font */

  --fs-h2: 2.25rem;        /* 36px */
  --lh-h2: 1.1;            /* @kind font */
  --ls-h2: -0.9px;         /* @kind font */

  --fs-h3: 1.5rem;         /* 24px */
  --lh-h3: 1.15;           /* @kind font */
  --ls-h3: -0.4px;         /* @kind font */

  --fs-card-title: 1.25rem;/* 20px */
  --lh-card-title: 1.25;   /* @kind font */
  --ls-card-title: normal; /* @kind font */

  --fs-body-lg: 1.125rem;  /* 18px */
  --lh-body-lg: 1.38;      /* @kind font */

  --fs-body: 1rem;         /* 16px */
  --lh-body: 1.5;          /* @kind font */

  --fs-sm: 0.875rem;       /* 14px */
  --lh-sm: 1.5;            /* @kind font */

  --fs-xs: 0.75rem;        /* 12px — overline / meta labels */
  --lh-xs: 1.4;            /* @kind font */
  --ls-overline: 0.08em;   /* @kind font */
}


/* Eventi Vino Milano — Spacing (8px base, generous editorial top-end) */
:root {
  --space-1: 8px;
  --space-2: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 80px;
  --space-10: 96px;
  --space-11: 128px;
  --space-12: 176px;
  --space-13: 192px;
  --space-14: 208px;

  /* Section rhythm */
  --section-y: 128px;      /* desktop vertical section padding */
  --section-y-mobile: 64px;
  --container-max: 1200px;
  --container-pad: 24px;
}


/* Eventi Vino Milano — Radius & Elevation
   Shallow depth: warm borders over shadows. Signature inset shadow on dark buttons. */
:root {
  /* Radius scale */
  --radius-micro: 4px;     /* small interactive */
  --radius-sm: 6px;        /* buttons, inputs, menu */
  --radius-md: 8px;        /* compact cards */
  --radius-lg: 12px;       /* standard cards, images */
  --radius-xl: 16px;       /* large containers, footer */
  --radius-pill: 9999px;   /* action pills, icon buttons */

  /* Elevation */
  --shadow-none: none;
  /* Level 2 — signature inset on dark buttons (white top highlight + dark ring + soft drop) */
  --shadow-inset: rgba(255, 255, 255, 0.2) 0px 0.5px 0px 0px inset,
                  rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px inset,
                  rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  /* Level 3 — soft warm focus / active glow */
  --shadow-focus: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  /* Card hover lift (used sparingly) */
  --shadow-card-hover: rgba(28, 28, 28, 0.06) 0px 6px 20px;

  /* Accessibility ring */
  --ring-width: 2px;
}


/* Eventi Vino Milano — base element defaults & link styling */
:root {
  color-scheme: light;
}
body {
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  margin: 0;
  text-wrap: balance;
}
p { text-wrap: pretty; }

/* Links: charcoal, underline carries the interactive signal; brand magenta on hover */
a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color 0.15s ease; }
a:hover { color: var(--vino-strong); }

::selection { background: var(--vino-soft); color: var(--charcoal); }

:focus-visible { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--ring); border-radius: var(--radius-sm); }