/* ============================================================
   Lorenzo Longiave — Design Tokens
   Typography-first, editorial, near-monochrome.

   Source: Lorenzo Longiave Portfolio Design System/colors_and_type.css
   This is a flat copy — fonts are loaded via <link> tags in index.html
   to avoid CORB blocks on cross-origin @import.
   ============================================================ */

:root {
  /* ---------- Color ---------- */
  --ll-ink:        #0E0E0C;   /* primary text, inverted surfaces */
  --ll-paper:      #F4F1EA;   /* primary background — warm off-white */
  --ll-bone:       #E7E2D6;   /* secondary surface, hover wash */
  --ll-smoke:      #6B6960;   /* secondary text, captions */
  --ll-mist:       #B8B4A8;   /* tertiary text, disabled */
  --ll-signal:     #FF5C1F;   /* the only accent. use sparingly. */
  --ll-white:      #FFFFFF;
  --ll-black:      #000000;

  --ll-hairline:   rgba(14, 14, 12, 0.12);
  --ll-hairline-strong: rgba(14, 14, 12, 0.32);
  --ll-hairline-paper:  rgba(244, 241, 234, 0.16); /* on dark bg */

  /* ---------- Semantic colors ---------- */
  --ll-fg-1:       var(--ll-ink);
  --ll-fg-2:       var(--ll-smoke);
  --ll-fg-3:       var(--ll-mist);
  --ll-bg-1:       var(--ll-paper);
  --ll-bg-2:       var(--ll-bone);
  --ll-bg-inverse: var(--ll-ink);
  --ll-fg-inverse: var(--ll-paper);
  --ll-accent:     var(--ll-signal);
  --ll-divider:    var(--ll-hairline);

  /* ---------- Typography stacks ---------- */
  --ll-font-display: 'Cabinet Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --ll-font-sans:    'Satoshi', 'Helvetica Neue', system-ui, sans-serif;
  --ll-font-serif:   'Sentient', Georgia, 'Times New Roman', serif;
  --ll-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale ---------- */
  --ll-text-mono:   12px;     /* meta, captions, year labels */
  --ll-text-sm:     14px;     /* small UI */
  --ll-text-base:   17px;     /* body */
  --ll-text-lg:     20px;     /* lead body */
  --ll-text-xl:     28px;     /* sub-headings */
  --ll-text-2xl:    44px;     /* section heads */
  --ll-text-3xl:    72px;     /* page titles */
  --ll-text-display: clamp(64px, 13vw, 200px);  /* hero display */

  /* ---------- Weights ---------- */
  --ll-w-light:    300;
  --ll-w-regular:  400;
  --ll-w-medium:   500;
  --ll-w-bold:     700;
  --ll-w-black:    900;

  /* ---------- Tracking ---------- */
  --ll-track-tight:  -0.03em;
  --ll-track-snug:   -0.02em;
  --ll-track-normal: -0.005em;
  --ll-track-mono:   0.04em;
  --ll-track-caps:   0.12em;

  /* ---------- Leading ---------- */
  --ll-lead-display: 0.95;
  --ll-lead-tight:   1.1;
  --ll-lead-snug:    1.25;
  --ll-lead-body:    1.5;
  --ll-lead-loose:   1.7;

  /* ---------- Spacing (8px grid) ---------- */
  --ll-s-1:   4px;
  --ll-s-2:   8px;
  --ll-s-3:   12px;
  --ll-s-4:   16px;
  --ll-s-5:   24px;
  --ll-s-6:   32px;
  --ll-s-7:   48px;
  --ll-s-8:   64px;
  --ll-s-9:   96px;
  --ll-s-10:  144px;
  --ll-s-11:  192px;

  --ll-margin: clamp(24px, 6vw, 96px);
  --ll-section: clamp(96px, 14vw, 192px);

  /* ---------- Radii ---------- */
  --ll-r-0:    0px;
  --ll-r-pill: 999px;

  /* ---------- Shadows (used very rarely) ---------- */
  --ll-shadow-float: 0 24px 48px -12px rgba(14, 14, 12, 0.12);

  /* ---------- Motion ---------- */
  --ll-ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --ll-dur-fast:    180ms;
  --ll-dur:         260ms;
  --ll-dur-slow:    400ms;
}

/* ============================================================
   Base + semantic typography classes
   ============================================================ */

html, body {
  background: var(--ll-bg-1);
  color: var(--ll-fg-1);
  font-family: var(--ll-font-sans);
  font-size: var(--ll-text-base);
  line-height: var(--ll-lead-body);
  letter-spacing: var(--ll-track-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.ll-paper { background: var(--ll-paper); color: var(--ll-ink); }
.ll-ink   { background: var(--ll-ink);   color: var(--ll-paper); }
.ll-bone  { background: var(--ll-bone);  color: var(--ll-ink); }

/* ---- Display & headings ---- */
.ll-display {
  font-family: var(--ll-font-display);
  font-size: var(--ll-text-display);
  font-weight: var(--ll-w-medium);
  line-height: var(--ll-lead-display);
  letter-spacing: var(--ll-track-tight);
  margin: 0;
}

.ll-h1 {
  font-family: var(--ll-font-display);
  font-size: var(--ll-text-3xl);
  font-weight: var(--ll-w-medium);
  line-height: var(--ll-lead-tight);
  letter-spacing: var(--ll-track-snug);
  margin: 0;
}

.ll-h2 {
  font-family: var(--ll-font-display);
  font-size: var(--ll-text-2xl);
  font-weight: var(--ll-w-medium);
  line-height: var(--ll-lead-tight);
  letter-spacing: var(--ll-track-snug);
  margin: 0;
}

.ll-h3 {
  font-family: var(--ll-font-display);
  font-size: var(--ll-text-xl);
  font-weight: var(--ll-w-medium);
  line-height: var(--ll-lead-snug);
  letter-spacing: var(--ll-track-snug);
  margin: 0;
}

/* ---- Body ---- */
.ll-lead {
  font-family: var(--ll-font-sans);
  font-size: var(--ll-text-lg);
  font-weight: var(--ll-w-regular);
  line-height: var(--ll-lead-snug);
  letter-spacing: var(--ll-track-normal);
}

.ll-body {
  font-family: var(--ll-font-sans);
  font-size: var(--ll-text-base);
  font-weight: var(--ll-w-regular);
  line-height: var(--ll-lead-body);
}

.ll-small {
  font-family: var(--ll-font-sans);
  font-size: var(--ll-text-sm);
  line-height: var(--ll-lead-snug);
}

/* ---- Editorial serif ---- */
.ll-serif {
  font-family: var(--ll-font-serif);
  font-style: italic;
  font-weight: var(--ll-w-regular);
  letter-spacing: var(--ll-track-normal);
}

.ll-quote {
  font-family: var(--ll-font-serif);
  font-style: italic;
  font-size: clamp(28px, 4vw, 56px);
  line-height: var(--ll-lead-snug);
  letter-spacing: var(--ll-track-snug);
  margin: 0;
}

/* ---- Mono / meta ---- */
.ll-mono {
  font-family: var(--ll-font-mono);
  font-size: var(--ll-text-mono);
  font-weight: var(--ll-w-regular);
  letter-spacing: var(--ll-track-mono);
  text-transform: lowercase;
}

.ll-meta {
  font-family: var(--ll-font-mono);
  font-size: var(--ll-text-mono);
  letter-spacing: var(--ll-track-caps);
  text-transform: uppercase;
  color: var(--ll-fg-2);
}

/* ============================================================
   Components
   ============================================================ */

/* ---- Link ---- */
.ll-link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--ll-dur) var(--ll-ease);
  padding-bottom: 2px;
}
.ll-link:hover { background-size: 100% 1px; }

/* ---- Buttons ---- */
.ll-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ll-s-3);
  padding: 14px 22px;
  font-family: var(--ll-font-sans);
  font-size: var(--ll-text-base);
  font-weight: var(--ll-w-medium);
  letter-spacing: var(--ll-track-normal);
  border: 1px solid transparent;
  border-radius: var(--ll-r-pill);
  cursor: pointer;
  transition: background var(--ll-dur) var(--ll-ease),
              color var(--ll-dur) var(--ll-ease),
              transform var(--ll-dur-fast) var(--ll-ease);
  text-decoration: none;
}
.ll-btn:active { transform: scale(0.98); }

.ll-btn--primary { background: var(--ll-ink); color: var(--ll-paper); }
.ll-btn--primary:hover { background: var(--ll-signal); color: var(--ll-paper); }

.ll-btn--ghost {
  background: transparent;
  color: var(--ll-ink);
  border-color: var(--ll-ink);
}
.ll-btn--ghost:hover { background: var(--ll-ink); color: var(--ll-paper); }

/* ---- Tag / pill ---- */
.ll-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 5px;
  border: 1px solid var(--ll-hairline-strong);
  border-radius: var(--ll-r-pill);
  font-family: var(--ll-font-mono);
  font-size: 11px;
  letter-spacing: var(--ll-track-caps);
  text-transform: uppercase;
  color: var(--ll-fg-2);
  background: transparent;
}
.ll-tag--filled { background: var(--ll-ink); color: var(--ll-paper); border-color: var(--ll-ink); }
.ll-tag--signal { background: var(--ll-signal); color: var(--ll-paper); border-color: var(--ll-signal); }

/* ---- Hairline divider ---- */
.ll-hr {
  border: 0;
  border-top: 1px solid var(--ll-hairline);
  margin: 0;
}

/* ---- Project row (list, not card) ---- */
.ll-row {
  display: grid;
  grid-template-columns: 48px 1fr auto auto;
  gap: var(--ll-s-5);
  align-items: baseline;
  padding: var(--ll-s-5) 0;
  border-top: 1px solid var(--ll-hairline);
  color: var(--ll-fg-2);
  cursor: pointer;
  transition: color var(--ll-dur) var(--ll-ease),
              background var(--ll-dur) var(--ll-ease),
              padding var(--ll-dur) var(--ll-ease);
}
.ll-row:hover {
  color: var(--ll-fg-1);
  background: var(--ll-bone);
  padding-left: var(--ll-s-4);
  padding-right: var(--ll-s-4);
}
.ll-row__num   { font-family: var(--ll-font-mono); font-size: var(--ll-text-mono); letter-spacing: var(--ll-track-mono); }
.ll-row__title { font-family: var(--ll-font-display); font-size: var(--ll-text-2xl); font-weight: var(--ll-w-medium); letter-spacing: var(--ll-track-snug); color: var(--ll-fg-1); line-height: 1.05; }
.ll-row__meta  { font-family: var(--ll-font-mono); font-size: var(--ll-text-mono); letter-spacing: var(--ll-track-caps); text-transform: uppercase; }
.ll-row__year  { font-family: var(--ll-font-mono); font-size: var(--ll-text-mono); letter-spacing: var(--ll-track-mono); }
.ll-row__arrow { display: inline-block; transition: transform var(--ll-dur) var(--ll-ease); }
.ll-row:hover .ll-row__arrow { transform: translateX(4px); }

/* ---- Field ---- */
.ll-field {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ll-hairline-strong);
  padding: 14px 0;
  font-family: var(--ll-font-sans);
  font-size: var(--ll-text-lg);
  color: var(--ll-fg-1);
  outline: none;
  transition: border-color var(--ll-dur) var(--ll-ease);
}
.ll-field::placeholder { color: var(--ll-fg-3); }
.ll-field:focus { border-bottom-color: var(--ll-ink); }

/* ---- Marquee ---- */
.ll-marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--ll-hairline);
  border-bottom: 1px solid var(--ll-hairline);
  padding: var(--ll-s-3) 0;
}
.ll-marquee__track {
  display: inline-block;
  animation: ll-marquee 30s linear infinite;
}
@keyframes ll-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Utility ---- */
.ll-stack > * + * { margin-top: var(--ll-s-5); }
.ll-stack-tight > * + * { margin-top: var(--ll-s-3); }
.ll-stack-loose > * + * { margin-top: var(--ll-s-7); }