/* ============================================================
   VinoPrint — Design Tokens v1.0
   Generated from DESIGN.md. Single source of truth: DESIGN.md.
   ============================================================ */

/* Circular (Lineto) e' commerciale: se avete la licenza, dichiarate qui gli
   @font-face e lo stack sotto lo usa senza altre modifiche. Il fallback e'
   DM Sans, il geometrico aperto piu' vicino a Circular per proporzioni e
   altezza della x. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');
/* Fraunces is lazy-loaded — it is below the fold on every page.
   @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300&display=swap'); */

:root {
  /* --- Brand ------------------------------------------------ */
  --vp-primary: #662731;
  --vp-primary-hover: #521e27;
  --vp-primary-active: #3c151c;
  --vp-primary-subtle: #f9f1f2;
  --vp-primary-subtle-2: #f3e2e5;
  --vp-primary-border: #e7c6cb;
  --vp-primary-muted: #d39da6;
  --vp-primary-bright: #b8616f;   /* decorative / large text only — 4.2:1 */
  --vp-primary-mid: #983e4d;
  --vp-primary-deep: #521e27;
  --vp-primary-deepest: #260d11;
  --vp-primary-on-dark: #d39da6;

  /* --- Foil (print finish accent — only where foil is sold) -- */
  --vp-foil: #b08a46;
  --vp-foil-light: #d8b878;
  --vp-foil-pale: #ebd9a8;
  --vp-foil-deep: #8a6a2e;
  --vp-foil-subtle: #faf4e6;
  --vp-foil-on-dark: #d8b878;

  /* --- Paper (light surfaces) ------------------------------- */
  --vp-canvas: #fbf8f4;
  --vp-surface: #ffffff;
  --vp-surface-sunken: #f2ece3;
  --vp-surface-kraft: #efe6d8;

  /* --- Cellar (dark surfaces) ------------------------------- */
  --vp-canvas-dark: #1a1013;
  --vp-surface-dark: #241a1e;
  --vp-surface-dark-raised: #2e2126;
  --vp-surface-dark-sunken: #140c0f;

  /* --- Ink -------------------------------------------------- */
  --vp-ink: #241a1c;
  --vp-ink-secondary: #4a3d40;
  --vp-ink-muted: #6e625b;
  --vp-ink-disabled: #a1958d;
  --vp-on-primary: #ffffff;
  --vp-on-dark: #f7f2ec;
  --vp-on-dark-muted: #b3a49d;
  --vp-on-foil: #241a1c;

  /* --- Rules ------------------------------------------------ */
  --vp-hairline: #e3dacd;
  --vp-hairline-strong: #cdbfad;
  --vp-hairline-dark: #3a2b30;
  --vp-hairline-dark-strong: #4e3b41;

  /* --- Semantic --------------------------------------------- */
  --vp-success: #43694f;
  --vp-success-subtle: #e8f0e9;
  --vp-success-on-dark: #8fbf9e;
  --vp-warning: #b4741c;
  --vp-warning-subtle: #fbf0de;
  --vp-warning-on-dark: #e0a854;
  --vp-danger: #c23a2b;           /* deliberately NOT a burgundy tint */
  --vp-danger-subtle: #fceae7;
  --vp-danger-on-dark: #f08d80;
  --vp-info: #3d5a80;
  --vp-info-subtle: #e9eef5;
  --vp-info-on-dark: #8fabcf;

  /* --- Prepress guides (label preview overlay ONLY) ---------- */
  --vp-dieline: #00a3c4;
  --vp-bleed-guide: #ff3d7f;
  --vp-safe-guide: #7a8f3f;

  /* --- Gradients -------------------------------------------- */
  --vp-foil-sheen: linear-gradient(105deg, #8a6a2e 0%, #d8b878 34%, #b08a46 50%, #ebd9a8 66%, #9a7838 100%);
  --vp-cellar-fade: linear-gradient(180deg, rgba(26,16,19,0) 0%, rgba(26,16,19,.86) 62%, #1a1013 100%);
  --vp-paper-tint: linear-gradient(180deg, #ffffff 0%, #f2ece3 100%);

  /* --- Semantic aliases (theme-switchable) ------------------- */
  --vp-bg: var(--vp-canvas);
  --vp-bg-surface: var(--vp-surface);
  --vp-bg-sunken: var(--vp-surface-sunken);
  --vp-bg-accent: var(--vp-surface-kraft);
  --vp-fg: var(--vp-ink);
  --vp-fg-secondary: var(--vp-ink-secondary);
  --vp-fg-muted: var(--vp-ink-muted);
  --vp-rule: var(--vp-hairline);
  --vp-rule-strong: var(--vp-hairline-strong);
  --vp-action: var(--vp-primary);
  --vp-action-fg: var(--vp-on-primary);
  --vp-bg-disabled: var(--vp-surface-sunken);
  --vp-fg-disabled: var(--vp-ink-disabled);
  --vp-bg-success: var(--vp-success-subtle);  --vp-fg-success: var(--vp-success);
  --vp-bg-warning: var(--vp-warning-subtle);  --vp-fg-warning: var(--vp-warning);
  --vp-bg-danger:  var(--vp-danger-subtle);   --vp-fg-danger:  var(--vp-danger);
  --vp-bg-info:    var(--vp-info-subtle);     --vp-fg-info:    var(--vp-info);

  /* --- Typography ------------------------------------------- */
  --vp-font-display: 'Circular Std', 'Circular', 'DM Sans', system-ui, sans-serif;
  --vp-font-ui: 'Circular Std', 'Circular', 'DM Sans', system-ui, sans-serif;
  --vp-font-editorial: 'Fraunces', 'Iowan Old Style', Georgia, serif;

  --vp-text-hero: 300 4.5rem/1.04 var(--vp-font-display);      /* 72 */
  --vp-text-display-xl: 300 3.5rem/1.06 var(--vp-font-display); /* 56 */
  --vp-text-display-lg: 400 2.5rem/1.12 var(--vp-font-display); /* 40 */
  --vp-text-display-md: 400 2rem/1.18 var(--vp-font-display);   /* 32 */
  --vp-text-display-sm: 500 1.5rem/1.25 var(--vp-font-display); /* 24 */
  --vp-text-title: 500 1.25rem/1.3 var(--vp-font-display);      /* 20 */
  --vp-text-eyebrow: 500 .75rem/1.2 var(--vp-font-display);     /* 12 */
  --vp-text-nav: 400 .875rem/1.2 var(--vp-font-display);        /* 14 */
  --vp-text-body-lg: 400 1.125rem/1.6 var(--vp-font-ui);        /* 18 */
  --vp-text-body: 400 1rem/1.65 var(--vp-font-ui);              /* 16 */
  --vp-text-body-sm: 400 .875rem/1.6 var(--vp-font-ui);         /* 14 */
  --vp-text-caption: 400 .8125rem/1.45 var(--vp-font-ui);       /* 13 */
  --vp-text-micro: 500 .6875rem/1.3 var(--vp-font-ui);          /* 11 */
  --vp-text-form-label: 500 .8125rem/1.3 var(--vp-font-ui);     /* 13 */
  --vp-text-button: 500 .875rem/1 var(--vp-font-ui);            /* 14 */
  --vp-text-button-sm: 500 .75rem/1 var(--vp-font-ui);          /* 12 */
  --vp-text-price: 500 1.25rem/1.2 var(--vp-font-ui);           /* 20 */
  --vp-text-price-lg: 500 1.75rem/1.15 var(--vp-font-ui);       /* 28 */
  --vp-text-data: 400 .875rem/1.5 var(--vp-font-ui);            /* 14 */
  --vp-text-editorial-lead: 300 1.5rem/1.5 var(--vp-font-editorial);
  --vp-text-editorial-quote: italic 300 2rem/1.35 var(--vp-font-editorial);
  --vp-text-vintage: 400 3rem/1 var(--vp-font-editorial);

  --vp-track-display: -.01em;
  --vp-track-hero: -.015em;
  --vp-track-eyebrow: .2em;
  --vp-track-nav: .08em;
  --vp-track-button: .06em;
  --vp-track-label: .04em;
  --vp-track-micro: .06em;

  /* --- Spacing (base 4) ------------------------------------- */
  --vp-space-xxs: 4px;
  --vp-space-xs: 8px;
  --vp-space-sm: 12px;
  --vp-space-md: 16px;
  --vp-space-lg: 24px;
  --vp-space-xl: 32px;
  --vp-space-xxl: 48px;
  --vp-space-xxxl: 64px;
  --vp-space-huge: 96px;
  --vp-space-section: 128px;

  /* --- The Frame -------------------------------------------- */
  --vp-frame-inset-sm: 12px;
  --vp-frame-inset-md: 24px;
  --vp-frame-inset-lg: 40px;
  --vp-frame-foot-multiplier: 5;
  --vp-frame-rule: 1px;
  --vp-frame-rule-strong: 2px;
  --vp-label-aspect: 0.809;    /* 1 : 1.237 — from the logo's inner field */
  --vp-lockup-aspect: 0.678;   /* 1 : 1.474 */

  /* --- Radius (square is the rule) -------------------------- */
  --vp-radius-none: 0px;
  --vp-radius-xs: 2px;
  --vp-radius-sm: 3px;
  --vp-radius-die-cut: 4px;
  --vp-radius-full: 50%;

  /* --- Elevation -------------------------------------------- */
  --vp-shadow-lift-1: 0 1px 2px rgba(36,26,28,.06), 0 2px 8px rgba(36,26,28,.04);
  --vp-shadow-lift-2: 0 2px 4px rgba(36,26,28,.06), 0 12px 28px rgba(36,26,28,.08);
  --vp-shadow-lift-3: 0 24px 64px rgba(36,26,28,.16);
  --vp-shadow-paper-drop: 0 18px 40px -12px rgba(36,26,28,.35);
  --vp-shadow-foil-emboss: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.18);

  /* --- Motion ----------------------------------------------- */
  --vp-dur-fast: 120ms;
  --vp-dur-base: 200ms;
  --vp-dur-slow: 320ms;
  --vp-dur-page: 480ms;
  --vp-ease-settle: cubic-bezier(.2,.7,.2,1);
  --vp-ease-exit: cubic-bezier(.6,0,.9,.4);
  --vp-rise: 8px;

  /* --- Layout ----------------------------------------------- */
  --vp-container-max: 1280px;
  --vp-container-wide: 1440px;
  --vp-container-prose: 680px;
  --vp-gutter: 24px;
  --vp-page-margin: 24px;
}

/* ============================================================
   Cellar theme — elevation is a lighter surface, never a shadow
   ============================================================ */
:root[data-theme='dark'] {
  --vp-bg: var(--vp-canvas-dark);
  --vp-bg-surface: var(--vp-surface-dark);
  --vp-bg-sunken: var(--vp-surface-dark-sunken);
  --vp-bg-accent: var(--vp-surface-dark-raised);
  --vp-fg: var(--vp-on-dark);
  --vp-fg-secondary: var(--vp-on-dark-muted);
  --vp-fg-muted: var(--vp-on-dark-muted);
  --vp-rule: var(--vp-hairline-dark);
  --vp-rule-strong: var(--vp-hairline-dark-strong);
  --vp-action: var(--vp-on-dark);
  --vp-action-fg: var(--vp-primary);
    --vp-bg-disabled: var(--vp-surface-dark-raised);
  --vp-fg-disabled: #6b585d;
  --vp-bg-success: rgba(143,191,158,.10);  --vp-fg-success: var(--vp-success-on-dark);
  --vp-bg-warning: rgba(224,168,84,.10);   --vp-fg-warning: var(--vp-warning-on-dark);
  --vp-bg-danger:  rgba(240,141,128,.10);  --vp-fg-danger:  var(--vp-danger-on-dark);
  --vp-bg-info:    rgba(143,171,207,.10);  --vp-fg-info:    var(--vp-info-on-dark);
  --vp-shadow-lift-1: none;
  --vp-shadow-lift-2: none;
  --vp-shadow-lift-3: 0 24px 64px rgba(0,0,0,.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --vp-bg: var(--vp-canvas-dark);
    --vp-bg-surface: var(--vp-surface-dark);
    --vp-bg-sunken: var(--vp-surface-dark-sunken);
    --vp-bg-accent: var(--vp-surface-dark-raised);
    --vp-fg: var(--vp-on-dark);
    --vp-fg-secondary: var(--vp-on-dark-muted);
    --vp-fg-muted: var(--vp-on-dark-muted);
    --vp-rule: var(--vp-hairline-dark);
    --vp-rule-strong: var(--vp-hairline-dark-strong);
    --vp-action: var(--vp-on-dark);
    --vp-action-fg: var(--vp-primary);
    --vp-bg-disabled: var(--vp-surface-dark-raised);
    --vp-fg-disabled: #6b585d;
    --vp-bg-success: rgba(143,191,158,.10);  --vp-fg-success: var(--vp-success-on-dark);
    --vp-bg-warning: rgba(224,168,84,.10);   --vp-fg-warning: var(--vp-warning-on-dark);
    --vp-bg-danger:  rgba(240,141,128,.10);  --vp-fg-danger:  var(--vp-danger-on-dark);
    --vp-bg-info:    rgba(143,171,207,.10);  --vp-fg-info:    var(--vp-info-on-dark);
    --vp-shadow-lift-1: none;
    --vp-shadow-lift-2: none;
    --vp-shadow-lift-3: 0 24px 64px rgba(0,0,0,.5);
  }
}

/* ============================================================
   Responsive scale collapse
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --vp-text-hero: 300 3.5rem/1.06 var(--vp-font-display);
    --vp-text-display-xl: 300 2.75rem/1.08 var(--vp-font-display);
    --vp-space-section: 96px;
  }
}
@media (max-width: 768px) {
  :root {
    --vp-text-hero: 300 2.75rem/1.08 var(--vp-font-display);
    --vp-text-display-lg: 400 2.125rem/1.15 var(--vp-font-display);
    --vp-space-section: 64px;
    --vp-space-huge: 64px;
  }
}
@media (max-width: 640px) {
  :root {
    --vp-frame-foot-multiplier: 3;
    --vp-frame-inset-lg: 24px;
  }
}
@media (max-width: 480px) {
  :root {
    --vp-text-hero: 300 2.25rem/1.1 var(--vp-font-display);
    --vp-text-display-lg: 400 1.875rem/1.2 var(--vp-font-display);
    --vp-track-eyebrow: .14em;
    --vp-page-margin: 16px;
  }
}
@media (min-width: 1025px) {
  :root { --vp-page-margin: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --vp-rise: 0px; --vp-dur-slow: 1ms; --vp-dur-page: 1ms; }
}

/* ============================================================
   The Frame — the one structural utility of the system
   ============================================================ */
.vp-frame {
  position: relative;
  background: var(--vp-bg-surface);
  border-radius: var(--vp-radius-none);
  padding: var(--vp-frame-inset-md);
  padding-bottom: calc(var(--vp-frame-inset-md) * var(--vp-frame-foot-multiplier));
}
.vp-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--vp-frame-rule) solid var(--vp-rule);
  pointer-events: none;
}
.vp-frame--sm { padding: var(--vp-frame-inset-sm); padding-bottom: calc(var(--vp-frame-inset-sm) * var(--vp-frame-foot-multiplier)); }
.vp-frame--lg { padding: var(--vp-frame-inset-lg); padding-bottom: calc(var(--vp-frame-inset-lg) * var(--vp-frame-foot-multiplier)); }
.vp-frame--inverted { background: var(--vp-primary); color: var(--vp-on-primary); }
.vp-frame--inverted::before { border-color: rgba(255,255,255,.25); }

/* Any label, thumbnail or preview locks to the logo's field ratio */
.vp-label-aspect { aspect-ratio: var(--vp-label-aspect); }
.vp-artwork {
  aspect-ratio: var(--vp-label-aspect);
  border-radius: var(--vp-radius-die-cut);
  box-shadow: var(--vp-shadow-paper-drop);
  background: var(--vp-surface);
}