/* tokens/fonts.css */
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,600;6..96,700&family=Cormorant+Garamond:wght@300;400;500;600&family=Jost:wght@300;400;500;600&family=Lato:wght@300;400;700;900&display=swap");

/* Google Fonts substitutions — see readme.md "Typography". No licensed brand binaries
   were supplied; these are the nearest public matches to the packaging artwork. */
:root{
  --font-display:"Bodoni Moda","Didot","Times New Roman",serif;
  --font-serif:"Cormorant Garamond","Bodoni Moda",Georgia,serif;
  --font-wordmark:"Jost","Futura","Century Gothic",sans-serif;
  --font-body:"Lato","Helvetica Neue",Helvetica,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;
}

/* tokens/colors.css */
:root{
  /* ---- Brand core: gold, black, white ---- */
  --viga-gold:#dbc078;          /* logotype gold, sampled from the VIGA EXPORT mark */
  --viga-gold-light:#e8d5a0;
  --viga-gold-deep:#8c744e;     /* Pantone 872 C metallic gold, sampled from the cherry carton */
  --viga-gold-dark:#6b5838;
  --viga-black:#1a191e;         /* packaging black — warm, never pure #000 */
  --viga-black-soft:#26242b;
  --viga-white:#ffffff;
  --viga-bone:#f7f4ee;          /* warm paper ground */
  --viga-bone-deep:#efe9de;

  /* ---- Fruit lines ---- */
  --viga-cherry:#ab1c2e;        /* Pantone 187 C, sampled from the cherry carton */
  --viga-cherry-deep:#7c1122;
  --viga-cherry-light:#c94054;
  --viga-kiwi:#8f9b3c;          /* Pantone 7746 C, sampled from the kiwi label */
  --viga-kiwi-deep:#6b7529;
  --viga-kiwi-light:#aab760;

  /* ---- Warm neutrals ---- */
  --neutral-0:#ffffff;
  --neutral-50:#f7f4ee;
  --neutral-100:#ebe6dc;
  --neutral-200:#d8d2c5;
  --neutral-300:#b8b1a3;
  --neutral-400:#928b7d;
  --neutral-500:#6e685d;
  --neutral-600:#514c44;
  --neutral-700:#3a3630;
  --neutral-800:#26242b;
  --neutral-900:#1a191e;

  /* ---- Semantic status (used sparingly, in back-office tables only) ---- */
  --status-ok:#5c7a3f;
  --status-warn:#b07d24;
  --status-error:#ab1c2e;
  --status-info:#4a5a6b;
}

/* tokens/typography.css */
:root{
  /* Display — Bodoni Moda. Always tight leading, generous tracking on caps. */
  --text-display-1:clamp(3.5rem,7vw,6.5rem);
  --text-display-2:clamp(2.75rem,5vw,4.5rem);
  --text-display-3:clamp(2rem,3.4vw,3rem);
  --text-h1:2.25rem;
  --text-h2:1.75rem;
  --text-h3:1.375rem;
  --text-h4:1.125rem;

  --text-body-lg:1.125rem;
  --text-body:1rem;
  --text-body-sm:0.9375rem;
  --text-caption:0.8125rem;
  --text-micro:0.6875rem;

  --leading-display:0.98; /* @kind other */
  --leading-tight:1.15; /* @kind other */
  --leading-heading:1.25; /* @kind other */
  --leading-body:1.65; /* @kind other */
  --leading-loose:1.8; /* @kind other */

  /* Tracking — the wordmark idiom: wide-spaced caps */
  --tracking-wordmark:0.42em; /* @kind other */   /* "E X P O R T" */
  --tracking-eyebrow:0.24em; /* @kind other */    /* section eyebrows, nav, buttons */
  --tracking-caps:0.12em; /* @kind other */
  --tracking-display:0.005em; /* @kind other */
  --tracking-body:0; /* @kind other */

  --weight-light:300; /* @kind other */
  --weight-regular:400; /* @kind other */
  --weight-medium:500; /* @kind other */
  --weight-semibold:600; /* @kind other */
  --weight-bold:700; /* @kind other */
  --weight-black:900; /* @kind other */

  --measure-narrow:38ch; /* @kind other */
  --measure-body:62ch; /* @kind other */
  --measure-wide:78ch; /* @kind other */
}

/* tokens/spacing.css */
:root{
  --space-0:0;
  --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;

  /* Section rhythm — editorial, airy */
  --section-y:clamp(72px,10vw,160px); /* @kind other */
  --section-y-tight:clamp(48px,6vw,96px); /* @kind other */

  --gutter:clamp(20px,5vw,72px); /* @kind other */
  --container:1320px; /* @kind other */
  --container-narrow:860px; /* @kind other */
  --container-text:680px; /* @kind other */

  --grid-cols:12; /* @kind other */
  --grid-gap:clamp(16px,2vw,32px); /* @kind other */
}

/* tokens/border.css */
:root{
  /* Square by default. The brand's corners are cut, not rounded. */
  --radius-none:0;
  --radius-xs:2px;
  --radius-sm:3px;
  --radius-pill:999px;

  --border-hairline:1px; /* @kind other */
  --border-thin:1px; /* @kind other */
  --border-medium:2px; /* @kind other */
  --border-rule:3px; /* @kind other */

  --border-gold:1px solid rgba(219,192,120,.42); /* @kind other */
  --border-gold-solid:1px solid var(--viga-gold-deep); /* @kind other */
  --border-ink:1px solid rgba(26,25,30,.14); /* @kind other */
  --border-ink-strong:1px solid var(--viga-black); /* @kind other */
  --border-onlight:1px solid var(--neutral-200); /* @kind other */
  --border-ondark:1px solid rgba(255,255,255,.14); /* @kind other */

  /* The signature diagonal: black panel, gold sliver, colour field */
  --diagonal-angle:-7deg; /* @kind other */
  --diagonal-sliver:14px; /* @kind other */
}

/* tokens/elevation.css */
:root{
  /* Shadows are barely there. Depth comes from hairlines and colour fields. */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(26,25,30,.06);
  --shadow-sm:0 2px 8px rgba(26,25,30,.07);
  --shadow-md:0 8px 24px rgba(26,25,30,.09);
  --shadow-lg:0 24px 64px rgba(26,25,30,.14);
  --shadow-gold:0 8px 28px rgba(140,116,78,.22);
  --shadow-inset-hairline:inset 0 0 0 1px rgba(219,192,120,.3);

  /* Protection gradients for type over photography */
  --scrim-bottom:linear-gradient(to top,rgba(26,25,30,.82) 0%,rgba(26,25,30,.45) 38%,rgba(26,25,30,0) 72%); /* @kind other */
  --scrim-left:linear-gradient(to right,rgba(26,25,30,.78) 0%,rgba(26,25,30,.28) 48%,rgba(26,25,30,0) 82%); /* @kind other */
  --scrim-full:linear-gradient(to bottom,rgba(26,25,30,.32),rgba(26,25,30,.62)); /* @kind other */

  --blur-panel:blur(14px) saturate(120%); /* @kind other */
  --blur-nav:blur(18px) saturate(115%); /* @kind other */
}

/* tokens/motion.css */
:root{
  --ease-standard:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-out-soft:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */

  --dur-instant:90ms; /* @kind other */
  --dur-fast:180ms; /* @kind other */
  --dur-base:260ms; /* @kind other */
  --dur-slow:520ms; /* @kind other */
  --dur-reveal:900ms; /* @kind other */

  --transition-color:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard); /* @kind other */
  --transition-transform:transform var(--dur-base) var(--ease-out-soft); /* @kind other */
  --transition-reveal:opacity var(--dur-reveal) var(--ease-out-soft),transform var(--dur-reveal) var(--ease-out-soft); /* @kind other */

  --hover-lift:translateY(-2px); /* @kind other */
  --press-scale:scale(.985); /* @kind other */
  --image-zoom:scale(1.045); /* @kind other */
}

/* tokens/semantic.css */
:root{
  /* Surfaces */
  --surface-page:var(--viga-white);
  --surface-page-warm:var(--viga-bone);
  --surface-ink:var(--viga-black);
  --surface-ink-soft:var(--viga-black-soft);
  --surface-card:var(--viga-white);
  --surface-card-warm:var(--viga-bone);
  --surface-card-ink:var(--viga-black-soft);
  --surface-cherry:var(--viga-cherry);
  --surface-kiwi:var(--viga-kiwi);
  --surface-gold:var(--viga-gold);

  /* Text */
  --text-primary:var(--viga-black);
  --text-secondary:var(--neutral-500);
  --text-muted:var(--neutral-400);
  --text-on-ink:var(--viga-white);
  --text-on-ink-secondary:rgba(255,255,255,.7);
  --text-on-colour:var(--viga-white);
  --text-accent:var(--viga-gold-deep);
  --text-accent-on-ink:var(--viga-gold);
  --text-eyebrow:var(--viga-gold-deep);
  --text-eyebrow-on-ink:var(--viga-gold);

  /* Lines */
  --line-subtle:var(--neutral-200);
  --line-strong:var(--viga-black);
  --line-gold:var(--viga-gold-deep);
  --line-on-ink:rgba(255,255,255,.16);

  /* Interactive */
  --action-primary-bg:var(--viga-black);
  --action-primary-fg:var(--viga-white);
  --action-primary-bg-hover:var(--viga-gold-deep);
  --action-secondary-fg:var(--viga-black);
  --action-secondary-border:var(--viga-black);
  --action-ghost-fg:var(--viga-gold-deep);
  --action-on-ink-bg:var(--viga-gold);
  --action-on-ink-fg:var(--viga-black);
  --action-disabled-bg:var(--neutral-200);
  --action-disabled-fg:var(--neutral-400);
  --focus-ring:0 0 0 2px var(--viga-white),0 0 0 4px var(--viga-gold-deep); /* @kind other */
  --focus-ring-ondark:0 0 0 2px var(--viga-black),0 0 0 4px var(--viga-gold); /* @kind other */

  /* Links */
  --link-fg:var(--viga-gold-deep);
  --link-fg-hover:var(--viga-black);
  --link-fg-on-ink:var(--viga-gold);
  --link-fg-on-ink-hover:var(--viga-gold-light);

  /* Fields */
  --field-bg:var(--viga-white);
  --field-border:var(--neutral-300);
  --field-border-focus:var(--viga-gold-deep);
  --field-fg:var(--viga-black);
  --field-placeholder:var(--neutral-400);
}

/* tokens/base.css */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-regular);line-height:var(--leading-heading);letter-spacing:var(--tracking-display);margin:0}
p{margin:0}
a{color:var(--link-fg);text-decoration:none;transition:var(--transition-color)}
a:hover{color:var(--link-fg-hover)}
img{display:block;max-width:100%}
::selection{background:var(--viga-gold);color:var(--viga-black)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* Brand utility idioms */
.viga-eyebrow{font-family:var(--font-wordmark);font-size:var(--text-caption);font-weight:var(--weight-medium);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-eyebrow)}
.viga-wordmark{font-family:var(--font-wordmark);letter-spacing:var(--tracking-wordmark);text-transform:uppercase}
.viga-rule{height:1px;background:var(--line-gold);border:0;opacity:.5}
/* Navbar: below 1100px the link row drops to its own line rather than clipping */
@media (max-width:1100px){[data-viga-nav] nav,body>div>div>header>nav,header>nav{flex-basis:100%;order:3;justify-content:flex-start;margin-left:0}}
/* Mobile: every multi-column grid collapses to one column; type and rhythm tighten. */
@media (max-width:760px){
  [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  :root{--text-display-1:clamp(2.5rem,11vw,3.5rem);--text-display-2:clamp(2.125rem,9vw,2.75rem);--text-display-3:clamp(1.625rem,7vw,2rem);--section-y:64px;--section-y-tight:44px}
  [data-viga-nav]{column-gap:var(--space-4)!important;row-gap:10px!important;padding-top:12px!important;padding-bottom:12px!important}
  [data-viga-nav] nav{flex-wrap:nowrap!important;overflow-x:auto;column-gap:18px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  [data-viga-nav] nav::-webkit-scrollbar{display:none}
  a[href^="mailto"]{max-width:100%;overflow-wrap:break-word}
  a[href^="mailto"][style*="inline-flex"]{padding-left:20px!important;padding-right:20px!important;font-size:11px!important;text-align:left}
  [data-viga-nav] nav a{font-size:10px!important;letter-spacing:.1em!important;padding-bottom:2px!important}
}