/* ==========================================================================
   Design tokens — colors, type scale, spacing, motion.
   Values are a professional responsive interpretation of the Keynote/PDF
   mockup: the mockup fixes proportion & hierarchy, not literal px sizes.
   ========================================================================== */

:root {
  /* Color system */
  --color-black: #0b0b0c;
  --color-white: #ffffff;
  --color-offwhite: #f4f1ea;      /* warm off-white — overlay cards */
  --color-pale-grey: #d6d6d6;     /* inactive typographic nav / backdrop type */
  --color-pale-grey-soft: #ececec;
  --color-accent: #7a81ff;
  --color-accent-dim: #5b62d9;

  --color-text: var(--color-black);
  --color-text-inverse: var(--color-white);
  --color-border: rgba(11, 11, 12, 0.12);
  --color-border-inverse: rgba(255, 255, 255, 0.18);

  /* Fonts */
  --font-display: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: Consolas, Monaco, "Courier New", monospace; /* direction-page functional links / buttons */

  /* Fluid type scale — clamp(min, preferred, max) */
  --fs-display-huge: clamp(4rem, 1rem + 19.5vw, 18.5rem);  /* RETAIL/BUSINESS/BRANDS/FILMS poster nav */
  --fs-display-xl: clamp(2.4rem, 1.75rem + 5.3vw, 6.6rem); /* hero I SEE / oversized direction words */
  --fs-display-lg: clamp(2.5rem, 1.6rem + 5vw, 6.5rem);    /* MARINA KAZAKOVA, panel titles */
  --fs-display-md: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem);  /* method titles */
  --fs-heading: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);     /* Brand Ecosystem Design statement */
  --fs-body-lg: clamp(1.1rem, 1rem + 0.5vw, 1.45rem);      /* quote, tagline, method description, work grid */
  --fs-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);      /* paragraphs */
  --fs-small: clamp(0.78rem, 0.75rem + 0.1vw, 0.875rem);   /* nav links */
  --fs-label: clamp(0.7rem, 0.68rem + 0.1vw, 0.8rem);      /* EXPERIENCE / BRAND ECOSYSTEM DESIGN / WAYS TO WORK TOGETHER */
  --fs-micro: 0.7rem;                                       /* year stamps etc */

  --lh-tight: 1.02;
  --lh-snug: 1.15;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-wider: 0.14em;
  --ls-label: 0.06em;

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 3.5rem;
  --space-6: 5.5rem;
  --space-7: 8rem;

  --container-max: 1440px;
  --container-pad: clamp(1.25rem, 1rem + 2vw, 4rem);

  --radius-card: clamp(18px, 1.4vw, 28px);
  --radius-btn: 4px;

  --nav-height: 76px;

  /* Motion */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;
}