/* Design tokens from Figma P26B — Home frame (1:111)
   Colors resolved from node fills; variables API scope unavailable. */

:root {
  /* Color */
  --color-page: #f6f7fc;
  --color-ink-primary: #1a1a1a;
  --color-ink-secondary: #6b6b6b;
  --color-ink-meta: rgba(0, 0, 0, 0.8);
  --color-ink-name-suffix: #0a0a0a;
  --color-border: #e5e5e5;
  --color-surface-visual: #eceff6;
  --color-pill-bg: #ffffff;
  --color-before: #ff417d;
  --color-after: #1e9709;
  --color-flower-pink: #ff71c1;
  --color-flower-magenta: #f671ff;
  --color-flower-center: #ffeaf3;
  --color-flower-purple: #ae69db;
  --color-flower-cyan: #43d2fd;
  --color-flower-cyan-deep: #1aa9d4;
  --color-about-gradient-start: #fbc4ff;
  --color-about-gradient-end: #ff7890;
  --color-on-accent: #ffffff;

  /* Type families */
  --font-display: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Type scale — Display/Hero */
  --text-hero-size: 120px;
  --text-hero-weight: 700;
  --text-hero-line-height: 132px;
  --text-hero-letter-spacing: -6px;

  /* Type scale — Display/Suffix (+ Portfolio / NYC / 2026) */
  --text-suffix-size: 14px;
  --text-suffix-weight: 400;
  --text-suffix-line-height: 24.5px;
  --text-suffix-letter-spacing: 0;

  /* Type scale — Body/Large (intro) */
  --text-body-large-size: 18px;
  --text-body-large-weight: 400;
  --text-body-large-line-height: 31.5px;
  --text-body-large-letter-spacing: 0;

  /* Type scale — Case/Meta (year) */
  --text-meta-size: 13px;
  --text-meta-weight: 500;
  --text-meta-line-height: 19.5px;
  --text-meta-letter-spacing: 0.78px;

  /* Type scale — Heading/Case-title */
  --text-case-title-size: 48px;
  --text-case-title-weight: 600;
  --text-case-title-line-height: 52.8px;
  --text-case-title-letter-spacing: -0.96px;

  /* Type scale — Case/Body (blurb + description) */
  --text-case-body-size: 16px;
  --text-case-body-weight: 400;
  --text-case-body-line-height: 28px;
  --text-case-body-letter-spacing: 0;

  /* Type scale — Case/Stat-label (captions) + pill */
  --text-caption-size: 12px;
  --text-caption-weight: 400;
  --text-caption-line-height: 16.8px;
  --text-caption-letter-spacing: 0;
  --text-pill-line-height: 18px;

  /* Type scale — Body/Pull-quote */
  --text-pullquote-size: 20px;
  --text-pullquote-weight: 400;
  --text-pullquote-line-height: 32px;
  --text-pullquote-letter-spacing: 0;

  /* Type scale — Case/stat-number */
  --text-stat-number-size: 36px;
  --text-stat-number-weight: 600;
  --text-stat-number-line-height: 36px;
  --text-stat-number-letter-spacing: -0.72px;

  /* Type scale — Case/stat-label */
  --text-stat-label-size: 12px;
  --text-stat-label-weight: 400;
  --text-stat-label-line-height: 16.8px;
  --text-stat-label-letter-spacing: 0;

  /* Type scale — about/nav + contact links */
  --text-nav-size: 12px;
  --text-nav-line-height: 16.8px;
  --text-link-size: 14px;
  --text-link-line-height: 21px;

  /* Spacing scale (from auto-layout) */
  --space-1: 4px;
  --space-2-sm: 8px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 32px;
  --space-5: 96px;

  /* Layout */
  --width-content: 680px;
  --width-visuals: 1080px;
  --width-page: 1440px;
  /* Figma intro is 1024px tall; on the web, fill the viewport instead */
  --height-intro: 100svh;
  --width-visual-card: 524px;
  --radius-visual-card: 12px;
  --radius-media: 12px;
  --radius-pill: 40px;
  --pad-visual-card: 32px;
  --pad-pill-block: 4px;
  --pad-pill-inline: 16px;
  --pad-case-bottom: 96px;
  --gap-intro: 96px;
  --gap-case: 32px;
  --gap-case-title: 4px;
  --gap-visuals: 32px;
  --gap-visual-card: 32px;
  --gap-stats: 8px;
  --pad-stat-card: 16px;
  --radius-stat-card: 8px;
  --divider-pad-block: 16px;
  --size-flower: 121px;
  --size-phone-w: 246px;
  --size-phone-h: 533px;

  /* About page */
  --pad-about-intro-top: 200px;
  --pad-about-section-block: 96px;
  --pad-nav-block: 36px;
  --pad-pullquote-outer-block: 32px;
  --pad-pullquote: 20px;
  --gap-about-section: 32px;
  --gap-about-copy: 8px;
  --gap-nav-links: 16px;
  --gap-contact: 32px;
  --gap-contact-icon: 4px;
}