/* ============================================================
   LNZ CREATIVE STUDIO — design tokens
   "Máxima contenção formal, máxima intensidade de intenção."
   ============================================================ */

/* ---------- FONT FACES ---------- */

/* HUMANE — display / editorial. Extreme-condensed, industrial.
   Use for BIG numerals, section openers, poster-scale titles. */
@font-face {
  font-family: "Humane";
  src: url("fonts/Humane-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Humane";
  src: url("fonts/Humane-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Humane";
  src: url("fonts/Humane-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Humane";
  src: url("fonts/Humane-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Humane";
  src: url("fonts/Humane-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Humane";
  src: url("fonts/Humane-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Humane";
  src: url("fonts/Humane-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* VISBY CF — primary UI / body / titles. Humanist geometric.
   Use for everything running-text and UI. */
@font-face {
  font-family: "Visby CF";
  src: url("fonts/VisbyCF-Thin.otf") format("opentype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Visby CF";
  src: url("fonts/VisbyCF-ThinOblique.otf") format("opentype");
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Visby CF";
  src: url("fonts/VisbyCF-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Visby CF";
  src: url("fonts/VisbyCF-LightOblique.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Visby CF";
  src: url("fonts/VisbyCF-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Visby CF";
  src: url("fonts/VisbyCF-RegularOblique.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Visby CF";
  src: url("fonts/VisbyCF-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Visby CF";
  src: url("fonts/VisbyCF-MediumOblique.otf") format("opentype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Visby CF";
  src: url("fonts/VisbyCF-DemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Visby CF";
  src: url("fonts/VisbyCF-DemiBoldOblique.otf") format("opentype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Visby CF";
  src: url("fonts/VisbyCF-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Visby CF";
  src: url("fonts/VisbyCF-BoldOblique.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Visby CF";
  src: url("fonts/VisbyCF-ExtraBold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Visby CF";
  src: url("fonts/VisbyCF-ExtraBoldOblique.otf") format("opentype");
  font-weight: 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Visby CF";
  src: url("fonts/VisbyCF-Heavy.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Visby CF";
  src: url("fonts/VisbyCF-HeavyOblique.otf") format("opentype");
  font-weight: 900; font-style: italic; font-display: swap;
}

:root {
  /* ========================================================
     COLOR — the disciplined palette
     White is silence. Orange is the only color that acts.
     ======================================================== */

  /* Canvas + surfaces */
  --lnz-canvas:        #FFFFFF;   /* primary canvas — the silence */
  --lnz-surface:       #F7F6F3;   /* off-white — layering without noise */
  --lnz-surface-warm:  #F1EEE8;   /* slightly warmer, for nested blocks */
  --lnz-line:          #E7E4DE;   /* hairlines, dividers */
  --lnz-line-soft:     #EFECE6;   /* lightest hairline */

  /* Ink */
  --lnz-ink:           #141412;   /* primary ink — near-black, warm */
  --lnz-ink-2:         #3A3A36;   /* secondary text */
  --lnz-ink-3:         #6E6E67;   /* tertiary, captions, metadata */
  --lnz-ink-4:         #A6A59E;   /* placeholder, disabled */
  --lnz-ink-5:         #CFCDC5;   /* decorative, borders-on-dark */

  /* Brand — the action color */
  --lnz-orange:        #FF6E1F;   /* THE action color. Use with intent. */
  --lnz-orange-deep:   #E85A0F;   /* pressed / hover-dark */
  --lnz-orange-soft:   #FFE5D4;   /* tint — rare, only for focus halos / flags */
  --lnz-orange-ink:    #9A3B0A;   /* orange-on-light text when needed */

  /* Reserved accents — for unique moments only, never simultaneous */
  --lnz-green:         #7AB800;   /* success / "alive" signal */
  --lnz-green-ink:     #3E6200;
  --lnz-lilac:         #9B59C5;   /* creative / experimental signal */
  --lnz-lilac-ink:     #5C2E81;

  /* Functional */
  --lnz-danger:        #D23A2C;
  --lnz-focus-ring:    #FF6E1F;   /* focus = orange, always */

  /* ========================================================
     SEMANTIC COLOR TOKENS
     ======================================================== */
  --bg:            var(--lnz-canvas);
  --bg-2:          var(--lnz-surface);
  --bg-3:          var(--lnz-surface-warm);
  --bg-inverse:    var(--lnz-ink);

  --fg:            var(--lnz-ink);
  --fg-2:          var(--lnz-ink-2);
  --fg-3:          var(--lnz-ink-3);
  --fg-muted:      var(--lnz-ink-4);
  --fg-inverse:    var(--lnz-canvas);

  --border:        var(--lnz-line);
  --border-soft:   var(--lnz-line-soft);
  --border-strong: var(--lnz-ink);

  --accent:        var(--lnz-orange);
  --accent-hover:  var(--lnz-orange-deep);
  --accent-fg:     #FFFFFF;        /* text on orange */
  --link:          var(--lnz-orange);

  /* ========================================================
     TYPOGRAPHY
     Two families. Two weights do most of the work.
     ======================================================== */
  --font-display: "Humane", "Bebas Neue", "Oswald", "Impact", sans-serif;
  --font-sans:    "Visby CF", "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Weights — the system privileges the two extremes */
  --fw-thin:     100;
  --fw-light:    300;
  --fw-regular:  400;   /* reading */
  --fw-medium:   500;
  --fw-demi:     600;
  --fw-bold:     700;   /* impact */
  --fw-heavy:    900;   /* reserved — display only */

  /* Letter-spacing — negative on big type, positive on all-caps labels */
  --tracking-display: -0.03em;   /* poster-scale */
  --tracking-h1:      -0.025em;
  --tracking-h2:      -0.02em;
  --tracking-h3:      -0.015em;
  --tracking-body:    -0.005em;
  --tracking-eyebrow:  0.12em;   /* ALL-CAPS labels */
  --tracking-micro:    0.08em;

  /* Line heights */
  --lh-display: 0.86;
  --lh-tight:   1.05;
  --lh-title:   1.15;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* Type scale (fluid-ish) */
  --fs-display-2xl: clamp(6rem, 14vw, 14rem);  /* Humane, poster */
  --fs-display-xl:  clamp(4.5rem, 10vw, 10rem);
  --fs-display-lg:  clamp(3.5rem, 7vw, 7rem);
  --fs-h1:          clamp(2.5rem, 4vw, 4rem);
  --fs-h2:          clamp(2rem, 3vw, 3rem);
  --fs-h3:          clamp(1.5rem, 2.2vw, 2.125rem);
  --fs-h4:          1.5rem;      /* 24 */
  --fs-h5:          1.25rem;     /* 20 */
  --fs-body-lg:     1.125rem;    /* 18 */
  --fs-body:        1rem;        /* 16 */
  --fs-body-sm:     0.9375rem;   /* 15 */
  --fs-caption:     0.8125rem;   /* 13 */
  --fs-micro:       0.6875rem;   /* 11 — ALL-CAPS eyebrows */

  /* ========================================================
     SPACING — 4px base, a 10-step scale
     ======================================================== */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   56px;
  --space-10:  72px;
  --space-11:  96px;
  --space-12:  128px;
  --space-13:  160px;

  /* ========================================================
     RADII — restrained. The system favors right angles.
     ======================================================== */
  --radius-0:   0;
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-xl:  14px;
  --radius-2xl: 22px;
  --radius-pill: 999px;

  /* ========================================================
     SHADOWS — almost never. When used, ultra-subtle.
     ======================================================== */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(20, 20, 18, 0.04),
              0 1px 2px rgba(20, 20, 18, 0.04);
  --shadow-2: 0 4px 12px rgba(20, 20, 18, 0.06),
              0 1px 2px rgba(20, 20, 18, 0.04);
  --shadow-3: 0 12px 32px rgba(20, 20, 18, 0.08),
              0 2px 6px rgba(20, 20, 18, 0.04);
  --shadow-press: inset 0 2px 0 rgba(20, 20, 18, 0.06);
  --shadow-focus: 0 0 0 3px rgba(255, 110, 31, 0.25);

  /* ========================================================
     MOTION — rápida saída, chegada suave.
     ======================================================== */
  --dur-micro:  140ms;   /* hover, press, icon micro */
  --dur-base:   260ms;   /* component transitions */
  --dur-slow:   480ms;   /* page sections */
  --dur-scene:  800ms;   /* scene changes */

  /* Custom curves: fast out, smooth in — "parece natural" */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);     /* default */
  --ease-in:     cubic-bezier(0.64, 0.04, 0.78, 0.39);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.2, 0.95);
  --ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);     /* rare, subtle overshoot */

  /* ========================================================
     LAYOUT
     ======================================================== */
  --container-sm:  640px;
  --container-md:  880px;
  --container-lg:  1120px;
  --container-xl:  1360px;
  --container-2xl: 1560px;

  --gutter: clamp(16px, 3vw, 40px);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Default look-and-feel for raw HTML elements.
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  color: var(--fg);
  background: var(--bg);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.lnz-display-2xl,
.lnz-display-xl,
.lnz-display-lg {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  text-transform: uppercase;
}
.lnz-display-2xl { font-size: var(--fs-display-2xl); }
.lnz-display-xl  { font-size: var(--fs-display-xl); }
.lnz-display-lg  { font-size: var(--fs-display-lg); }

h1, .lnz-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-h1);
  color: var(--fg);
  margin: 0;
}
h2, .lnz-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--fg);
  margin: 0;
}
h3, .lnz-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-demi);
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-h3);
  color: var(--fg);
  margin: 0;
}
h4, .lnz-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-demi);
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-h3);
  color: var(--fg);
  margin: 0;
}
h5, .lnz-h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  font-weight: var(--fw-demi);
  line-height: var(--lh-title);
  color: var(--fg);
  margin: 0;
}

p, .lnz-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.lnz-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.lnz-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-body);
  max-width: 60ch;
}

small, .lnz-caption {
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--fg-3);
}

.lnz-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.lnz-eyebrow--ink { color: var(--fg); }
.lnz-eyebrow--muted { color: var(--fg-3); }

a, .lnz-link {
  color: var(--link);
  text-decoration: none;
  font-weight: var(--fw-demi);
  transition: color var(--dur-micro) var(--ease-out);
}
a:hover, .lnz-link:hover {
  color: var(--accent-hover);
}

code, kbd, samp, pre, .lnz-mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
  letter-spacing: 0;
}
code {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}

::selection {
  background: var(--lnz-orange);
  color: #fff;
}

*:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}