/* ============================================================
   INNESTO — vino e miscele · bistrot wine bar, Roma
   colors_and_type.css — foundational + semantic tokens
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "Agilera";
  src: url("../fonts/agilera.woff") format("woff"),
       url("../fonts/agilera.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
/* All Round Gothic — self-hosted from the uploaded Fontspring DEMO family.
   Roman weights 400/500/600/700 + matching obliques (font-style: italic). */
/* Heaviest display cut, available as weight 800 for big numerals/labels */
:root {
  /* ---------- CORE PALETTE ----------
     Warm, earthy, botanical. Drawn from the brand pattern:
     sage, brass, aubergine, charcoal-olive, paper. */

  /* Paper / surfaces (warm off-white) */
  --paper:        #EDE8DA;   /* primary background */
  --paper-2:      #E3DCC9;   /* sunken / secondary surface */
  --paper-3:      #F5F1E8;   /* raised cards on paper */

  /* Ink (warm charcoal-olive, never pure black) */
  --ink:          #26281F;   /* primary text / dark surfaces */
  --ink-2:        #3A3D34;   /* dark surface alt */
  --ink-soft:     #4C4F44;   /* muted dark text */

  /* Sage — the signature brand green */
  --sage:         #6C817C;   /* brand primary */
  --sage-light:   #8FA39C;
  --sage-pale:    #B9C6BF;
  --sage-deep:    #4E625C;
  --sage-ink:     #33433E;   /* darkest sage, for dark mode panels */

  /* Brass / ochre — warm metallic accent */
  --brass:        #C0915C;
  --brass-deep:   #7E5526;
  --brass-pale:   #D8B988;

  /* Aubergine — deep plum, sparingly */
  --aubergine:    #4A3048;
  --aubergine-deep:#37223A;

  /* ---------- SEMANTIC COLOR ---------- */
  --bg:           var(--paper);
  --bg-sunken:    var(--paper-2);
  --surface:      var(--paper-3);
  --surface-dark: var(--ink);

  --fg1:          var(--ink);       /* primary text */
  --fg2:          var(--ink-soft);  /* secondary text */
  --fg3:          #5C5D50;          /* tertiary / captions */
  --fg-on-dark:   var(--paper);     /* text on dark surfaces */
  --fg-on-dark-2: #C3C1B2;

  --accent:       var(--sage);      /* primary interactive */
  --accent-hover: var(--sage-deep);
  --accent-2:     var(--brass);     /* highlights, prices, dividers */
  --accent-3:     var(--aubergine); /* rare emphasis */

  --line:         #D2CBB8;          /* hairline borders on paper */
  --line-strong:  #BBB29B;
  --line-on-dark: rgba(237,232,218,.18);

  --positive:     #5E7B57;
  --danger:       #9B4A33;

  /* ---------- TYPE FAMILIES ----------
     Agilera is reserved for the LOGO ONLY. All display, headline,
     body and UI type is set in All Round Gothic. */
  --font-display: "all-round-gothic", "Poppins", "Century Gothic", sans-serif;
  --font-sans:    "all-round-gothic", "Poppins", "Century Gothic", sans-serif;
  --font-logo:    "Agilera", "Cormorant Garamond", Georgia, serif; /* logo only */
  --font-mono:    "Courier New", ui-monospace, monospace;

  /* ---------- TYPE SCALE (fluid-ish, px) ---------- */
  --t-display:  clamp(56px, 8vw, 112px);
  --t-h1:       clamp(40px, 5vw, 64px);
  --t-h2:       clamp(30px, 3.4vw, 44px);
  --t-h3:       24px;
  --t-body-lg:  20px;
  --t-body:     17px;
  --t-small:    14px;
  --t-caption:  12px;
  --t-eyebrow:  13px;

  /* ---------- SPACING (8px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ---------- RADII ---------- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---------- SHADOWS (soft, warm) ---------- */
  --shadow-sm: 0 1px 2px rgba(38,40,31,.08);
  --shadow-md: 0 6px 20px rgba(38,40,31,.10);
  --shadow-lg: 0 18px 48px rgba(38,40,31,.16);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.4,.0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.03em;
  color: var(--fg1);
}
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--fg1);
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--fg1);
}
.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .005em;
  color: var(--fg1);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.t-body-lg {
  font-family: var(--font-sans);
  font-size: var(--t-body-lg);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg2);
}
.t-body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--fg2);
}
.t-small {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg3);
}
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--fg3);
}
/* spaced micro-label, as in the logo's "vino e miscele" */
.t-spaced {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: lowercase;
  font-size: var(--t-caption);
  color: var(--fg3);
}



  html,body{margin:0;background:var(--paper);}
  body{font-family:var(--font-sans);color:var(--fg1);}
  ::selection{background:var(--sage);color:var(--paper);}
  a{color:inherit;text-decoration:none;}
  .site{max-width:1280px;margin:0 auto;}

html{scroll-behavior:smooth;}
section[id],footer[id]{scroll-margin-top:90px;}