/* =========================================================
   Paolo Bortolotti — Foundations
   Bold, conversational, sans-only. Black & white grounded
   in vivid orange + red. Neutrals are clean grays, not warm.
   ========================================================= */

/* ---- Webfonts (Plus Jakarta Sans as "Jakarta" + Geist Mono + Caveat, same files as paolobortolotti.com) ---- */

@font-face {
  font-family: "Jakarta";
  src: url("fonts/jakarta-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Jakarta";
  src: url("fonts/jakarta-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Arial metric-matched to Jakarta: no layout shift while the webfont loads */
@font-face {
  font-family: "Jakarta Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 99%;
  descent-override: 21%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  /* ============ COLOR — base palette ============ */
  /* Brand: ink black, near-white, two vivid accents (orange + red). */
  --pb-ink:        #1d1d1b;   /* canonical brand black, lifted from the logo */
  --pb-ink-soft:   #2a2a2a;
  --pb-paper:      #fafafa;   /* clean off-white canvas */
  --pb-paper-pure: #ffffff;
  --pb-paper-deep: #f1f1f1;   /* card / surface tier */

  /* Neutral scale — clean cool grays, derived neutrally from ink */
  --pb-n-100: #f5f5f5;
  --pb-n-200: #e5e5e5;
  --pb-n-300: #cccccc;
  --pb-n-400: #999999;
  --pb-n-500: #666666;
  --pb-n-600: #444444;
  --pb-n-700: #2a2a2a;
  --pb-n-800: #1d1d1b;

  /* Accent — orange is the one primary: full surfaces with ink text on them.
     Red is functional only: form errors (--pb-error). Never a fill, text or surface.
     No soft or deep tones: one orange, one red. */
  --pb-orange:        #ff5c1f;
  --pb-red:           #e21f26;

  /* Semantic — bright, friendly, conversational. No dark olive, no muted ochre. */
  --pb-success:       #1ea672;   /* fresh green */
  --pb-warn:          #ff5c1f;   /* the brand orange doubles as warning */
  --pb-error:         #e21f26;   /* functional error state only: the one use of red */
  --pb-info:          #2a6df4;   /* clear blue */

  /* ============ FOREGROUND / BACKGROUND tokens ============ */
  --fg-1: var(--pb-ink);          /* primary text */
  --fg-2: var(--pb-n-600);        /* secondary text */
  --fg-3: var(--pb-n-500);        /* tertiary / metadata */
  --fg-4: var(--pb-n-400);        /* disabled, hint */
  --fg-on-ink: var(--pb-paper);   /* text on dark surfaces */

  --bg-1: var(--pb-paper-pure);   /* canvas of every light scene: pure white, never grey paper */
  --bg-2: var(--pb-paper-pure);   /* raised surface */
  --bg-3: var(--pb-paper-deep);   /* hover of light button only, never a surface */
  --bg-ink: var(--pb-ink);        /* dark inversion */
  --bg-orange: var(--pb-orange);  /* full orange scene, ink text on it */

  /* No gradients anywhere: every background is flat ink, white or full orange. */

  --rule-1: var(--pb-n-300);      /* hairlines, dividers */
  --rule-2: var(--pb-n-200);      /* very subtle dividers */
  --rule-strong: var(--pb-ink);   /* editorial rule */

  /* Second voice: same face and weight, 48% of the current colour
     (use 75% of ink on orange to keep contrast). Accents on white use
     this, never orange text. */
  --tone-second: color-mix(in srgb, currentColor 48%, transparent);

  /* ============ TYPE — families ============ */
  /* Jakarta does headings, body, buttons and menus: weight does the
     work. Geist Mono for labels and technical readouts. Caveat only
     for the handwritten line in the pause overlay ("Sei da caffè?"). */
  --font-display: "Jakarta", "Jakarta Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Jakarta", "Jakarta Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-hand:    "Caveat", cursive;

  /* ============ TYPE — scale ============ */
  /* Display is BIG. Modular ratio ~1.25 with a generous display jump. */
  --t-display:  clamp(64px, 9vw, 144px);
  --t-h1:       clamp(44px, 5.6vw, 80px);
  --t-h2:       clamp(32px, 3.8vw, 52px);
  --t-h3:       28px;
  --t-h4:       22px;
  --t-lead:     20px;
  --t-body:     16px;
  --t-small:    14px;
  --t-micro:    12px;

  --lh-tight:   1.0;
  --lh-snug:    1.15;
  --lh-normal:  1.5;
  --lh-loose:   1.65;

  --tracking-tight:  -0.035em;     /* tight, sans display */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.14em;

  /* Weight system — sans, so weight does the lifting */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    800;

  /* ============ SPACING ============ */
  --s-0:  0;
  --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;

  /* ============ RADIUS ============ */
  --r-0:     0px;      /* scenes: full rectangles, hard edge */
  --r-inner: 6px;      /* buttons, inputs, inline code */
  --r-tile:  10px;     /* tiles */
  --r-card:  14px;     /* cards */
  --r-pill:  999px;    /* nav and status chips only */

  /* ============ SHADOW ============ */
  /* Flat at rest. Depth comes from scene background changes.
     Shadows only on floating cards and on the light button hover. */
  --sh-card:  0 30px 35px -20px rgba(29,29,27,0.40);
  --sh-hover: 0 6px 24px rgba(29,29,27,0.25);
  /* Legacy steps, kept for preview frames only */
  --sh-1: 0 1px 0 rgba(29,29,27,0.04);
  --sh-2: 0 1px 2px rgba(29,29,27,0.06), 0 1px 1px rgba(29,29,27,0.04);
  --sh-3: 0 8px 24px rgba(29,29,27,0.08), 0 2px 6px rgba(29,29,27,0.04);
  --sh-4: 0 24px 60px rgba(29,29,27,0.14), 0 6px 16px rgba(29,29,27,0.06);
  --sh-press: inset 0 1px 0 rgba(29,29,27,0.06);

  /* ============ MOTION ============ */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
  --dur-4: 600ms;
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   ========================================================= */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: var(--w-bold); }
h2 { font-size: var(--t-h2); font-weight: var(--w-bold); line-height: var(--lh-snug); }
h3 { font-size: var(--t-h3); font-weight: var(--w-semibold); line-height: var(--lh-snug); letter-spacing: -0.02em; }
h4 { font-size: var(--t-h4); font-weight: var(--w-semibold); letter-spacing: -0.01em; }

.display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.045em;
}

.lead {
  font-size: var(--t-lead);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  text-wrap: pretty;
  max-width: 62ch;
}

p {
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  max-width: 68ch;
  text-wrap: pretty;
  margin: 0;
}

small, .small { font-size: var(--t-small); color: var(--fg-2); line-height: var(--lh-normal); }
.micro      { font-size: var(--t-micro); color: var(--fg-3); }

/* Label — Geist Mono caps, never below 11px */
.eyebrow, .label-caps {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--w-regular);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Pull-quote / blockquote — sans, big, tight */
blockquote, .pull-quote {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  color: var(--fg-1);
  letter-spacing: -0.025em;
  border-left: 3px solid var(--pb-orange);
  padding-left: var(--s-5);
  margin: 0;
}

a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur-1) var(--ease-out);
}
a:hover { text-decoration-thickness: 2px; }
/* Orange link hover only on ink (no orange text on white) */
.on-ink a:hover, [data-tone="dark"] a:hover { color: var(--pb-orange); }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; }
code {
  background: var(--bg-3);
  padding: 0.1em 0.4em;
  border-radius: var(--r-inner);
  color: var(--fg-1);
}

hr {
  border: 0;
  border-top: 1px solid var(--rule-1);
  margin: var(--s-7) 0;
}

::selection { background: var(--pb-orange); color: var(--pb-paper-pure); }

/* Editorial container */
.container { max-width: 1240px; margin: 0 auto; padding: 0 var(--s-6); }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 var(--s-6); }