/* ==========================================================================
   zejneba.com — Design tokens
   --------------------------------------------------------------------------
   Generated 1:1 from the Figma variables and text styles in
   "Portfolio website - zejneba.com" (Branding page).
   Figma name  →  CSS name:   brand/moss → --brand-moss,
                              Heading/Bold/64 → .heading-bold-64
   Change a value here and it changes everywhere on the site.
   ========================================================================== */

:root {
  /* Colors */
  --base-white: #ffffff;
  --base-black: #141414;
  --base-black-card: #1f1f1e;
  --brand-moss: #3f5a34;
  --brand-moss-dark: #2e4326;
  --brand-olive: #7e8f57;
  --brand-sage: #b9c5a8;
  --brand-fog: #e3e7dc;
  --brand-stone: #d9d1c1;
  --accent-orange: #ff5a1f;
  --accent-orange-tint: #ffe5d9;
  --accent-orange-text: #c2410c;
  --accent-blue: #2f5bff;
  --accent-blue-tint: #e2e9ff;
  --accent-blue-text: #1e3fd0;
  --neutral-grey-50: #f7f7f5;
  --neutral-grey-100: #f3f3f1;
  --neutral-grey-200: #ededea;
  --neutral-line: #e6e6e1;
  --neutral-subtle: #a3a39e;
  --neutral-muted: #6e6e69;
  --neutral-body: #3c3c38;

  /* Color scales */
  --scale-moss-50: #f2f3f1;
  --scale-moss-100: #e2e6e1;
  --scale-moss-200: #c5cdc2;
  --scale-moss-300: #9fad9a;
  --scale-moss-400: #6f8367;
  --scale-moss-500: #3f5a34;
  --scale-moss-600: #364d2c;
  --scale-moss-700: #2c3f24;
  --scale-moss-800: #23321d;
  --scale-moss-900: #192415;

  --scale-olive-50: #f6f7f3;
  --scale-olive-100: #eceee6;
  --scale-olive-200: #d8ddcd;
  --scale-olive-300: #bfc7ab;
  --scale-olive-400: #9eab81;
  --scale-olive-500: #7e8f57;
  --scale-olive-600: #6b7a4a;
  --scale-olive-700: #58643d;
  --scale-olive-800: #454f30;
  --scale-olive-900: #323923;

  --scale-orange-50: #fff3ef;
  --scale-orange-100: #ffe6dd;
  --scale-orange-200: #ffcdbc;
  --scale-orange-300: #ffad8f;
  --scale-orange-400: #ff8357;
  --scale-orange-500: #ff5a1f;
  --scale-orange-600: #d94d1a;
  --scale-orange-700: #b33f16;
  --scale-orange-800: #8c3211;
  --scale-orange-900: #66240c;

  --scale-blue-50: #f0f4ff;
  --scale-blue-100: #e0e6ff;
  --scale-blue-200: #c1ceff;
  --scale-blue-300: #97adff;
  --scale-blue-400: #6384ff;
  --scale-blue-500: #2f5bff;
  --scale-blue-600: #284dd9;
  --scale-blue-700: #2140b3;
  --scale-blue-800: #1a328c;
  --scale-blue-900: #132466;

  /* Fonts */
  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Corner radius */
  --radius-xs: 6px;
  --radius-s: 10px;
  --radius-m: 12px;
  --radius-l: 14px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-pill: 99px;

  /* Corner shape: smooth (squircle-like) corners on everything rounded,
     like Figma's corner smoothing. 1 = plain round, 2 = full squircle.
     Browsers without support simply show plain round corners. */
  --corner-shape: superellipse(1.6);

  /* Shadows */
  --shadow-button: 0 6px 7px rgba(0, 0, 0, 0.28);
  --shadow-button-soft: 0 2px 2px rgba(0, 0, 0, 0.05);
  --shadow-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --shadow-nav: 0 12px 15px rgba(0, 0, 0, 0.14);
  --shadow-nav-scrolled: 0 8px 24px rgba(0, 0, 0, 0.035);
  --shadow-raised: 0 4px 7px rgba(20, 20, 20, 0.06), 0 1px 1px rgba(20, 20, 20, 0.05);
  --shadow-card: 0 8px 12px rgba(20, 20, 20, 0.06), 0 1px 1px rgba(20, 20, 20, 0.04);
  --shadow-screen: 0 12px 40px rgba(20, 20, 20, 0.08);

  /* Layout
     Extra width for content sections on large screens. 0 up to a 1440px
     viewport, then grows gently and stops at +128px (around 2080px). */
  --content-extra: clamp(0px, (100vw - 1440px) * 0.2, 128px);

  /* Mobile grid (up to 600px): 4 columns between 24px margins, 16px gutters.
     All text starts on the 24px line. Full-width dark cards (CTA, footer,
     How I work hero) and the nav sit 8px from the screen edge with 16px
     inside, so their text lands on the same 24px line.
     Add ?grid to any page URL to see the columns. */
  --grid-margin: 24px;
  --grid-gutter: 16px;
  --grid-edge: 8px;
  --grid-inset: calc(var(--grid-margin) - var(--grid-edge)); /* 16px: padding inside an edge card */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.35s;
}


/* Text styles
   --------------------------------------------------------------------------
   One class per Figma text style. Use them directly in HTML:
   <h2 class="heading-bold-48">…</h2>
   -------------------------------------------------------------------------- */

.display-2xl {
  font-family: var(--font-heading);
  font-size: 96px;
  font-weight: 700;
  line-height: 96px;
  letter-spacing: -0.04em;
}

.display-xl {
  font-family: var(--font-heading);
  font-size: 80px;
  font-weight: 700;
  line-height: 84px;
  letter-spacing: -0.04em;
}

.display-l {
  font-family: var(--font-heading);
  font-size: 72px;
  font-weight: 700;
  line-height: 76px;
  letter-spacing: -0.035em;
}

.heading-bold-64 {
  font-family: var(--font-heading);
  font-size: 64px;
  font-weight: 700;
  line-height: 68px;
  letter-spacing: -0.035em;
}

.heading-semibold-64 {
  font-family: var(--font-heading);
  font-size: 64px;
  font-weight: 600;
  line-height: 68px;
  letter-spacing: -0.035em;
}

.heading-bold-56 {
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: -0.035em;
}

.heading-semibold-56 {
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 600;
  line-height: 60px;
  letter-spacing: -0.035em;
}

.heading-bold-48 {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 700;
  line-height: 54px;
  letter-spacing: -0.03em;
}

.heading-semibold-48 {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 600;
  line-height: 54px;
  letter-spacing: -0.03em;
}

.heading-bold-42 {
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.03em;
}

.heading-semibold-42 {
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -0.03em;
}

.heading-bold-40 {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  line-height: 46px;
  letter-spacing: -0.025em;
}

.heading-semibold-40 {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 600;
  line-height: 46px;
  letter-spacing: -0.025em;
}

.heading-bold-36 {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: -0.025em;
}

.heading-semibold-36 {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 600;
  line-height: 42px;
  letter-spacing: -0.025em;
}

.heading-bold-32 {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.02em;
}

.heading-semibold-32 {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.02em;
}

.heading-bold-30 {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: -0.02em;
}

.heading-semibold-30 {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: -0.02em;
}

.heading-bold-28 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.02em;
}

.heading-semibold-28 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: -0.02em;
}

.heading-bold-24 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.015em;
}

.heading-semibold-24 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.015em;
}

.heading-bold-22 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.01em;
}

.heading-semibold-22 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.01em;
}

.heading-bold-20 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.01em;
}

.heading-semibold-20 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.01em;
}

.heading-bold-18 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -0.005em;
}

.heading-semibold-18 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.005em;
}

.subheading-24 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.015em;
}

.subheading-20 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.01em;
}

.subheading-18 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: -0.005em;
}

.subheading-16 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.0025em;
}

.number-72 {
  font-family: var(--font-heading);
  font-size: 72px;
  font-weight: 500;
  line-height: 72px;
  letter-spacing: -0.04em;
}

.number-56 {
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 500;
  line-height: 60px;
  letter-spacing: -0.04em;
}

.number-46 {
  font-family: var(--font-heading);
  font-size: 46px;
  font-weight: 500;
  line-height: 50px;
  letter-spacing: -0.035em;
}

.number-32 {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.03em;
}

.number-28 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.02em;
}

.quote-28 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -0.035em;
}

.body-lead-22 {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 300;
  line-height: 34px;
  letter-spacing: -0.005em;
}

.body-lead-20 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  letter-spacing: -0.005em;
}

.body-medium-20 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.005em;
}

.body-regular-20 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.005em;
}

.body-medium-18 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.0025em;
}

.body-regular-18 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.0025em;
}

.body-medium-17 {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 27px;
  letter-spacing: -0.0025em;
}

.body-regular-17 {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: -0.0025em;
}

.body-medium-16 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
}

.body-regular-16 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}

.body-medium-15 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}

.body-regular-15 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}

.body-medium-14 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.body-regular-14 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.body-medium-13 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.body-regular-13 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}

.ui-button-l {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.ui-button-m {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
}

.ui-input {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}

.ui-nav-link {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}

.ui-button-s {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.ui-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.ui-tag {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
}

.ui-caption {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.ui-overline {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ui-tooltip {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.ui-micro {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
}

.ui-overline-s {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}