/* ─────────────────────────────────────────────────────────────
   Fenn design tokens — extracted from Figma library
   "[PRIVATE] Fenn <> Finca" (page: Library)
   The app uses SF Pro; on the web we get it via the system
   stack on Apple devices, with metric-close fallbacks elsewhere.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Type ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  /* letterSpacing -2 (%) in Figma */
  --tracking: -0.02em;
  --tracking-caption: 0.2em; /* caption: letterSpacing 2 */

  /* heading/* */
  --h0-size: 40px;   --h0-line: 40px;   --h0-weight: 510;
  --h2-size: 28px;   --h2-line: 32px;   --h2-weight: 510;
  --h3-size: 24px;   --h3-line: 30px;   --h3-weight: 700;
  --h4-size: 18px;   --h4-line: 22px;   --h4-weight: 700;
  --h4-heavy-weight: 860;
  --h6-size: 16px;   --h6-line: 20px;   --h6-weight: 700;

  /* body/* — "Medium" in the app = 510 */
  --body-md-size: 16px; --body-md-line: 19px;
  --body-sm-size: 14px; --body-sm-line: 18px;
  --body-xs-size: 12px; --body-xs-line: 14px;
  --body-weight: 510;
  --body-weight-bold: 700;
  --caption-size: 10px; --caption-line: 13px; --caption-weight: 700;

  /* ── Text ── */
  --text-primary: #333333;
  --text-secondary: rgba(0, 0, 0, 0.50);   /* #00000080 */
  --text-tertiary: rgba(0, 0, 0, 0.30);    /* #0000004d */
  --text-inverted: #f2f2f2;
  --text-primary-dark-only: #ffffff;
  --text-subtle-dark-fixed: rgba(255, 255, 255, 0.60); /* #ffffff99 */

  /* ── Surfaces ── */
  --surface-primary: #f2f2f2;
  --surface-raised: #ffffff;
  --surface-inverted: #1a1a1a;
  --surface-subtle: #00b4ff;
  --surface-none: transparent;

  /* ── Brand / accent ── */
  --brand-white: #ffffff;
  --brand-black: #000000;
  --accent: #3d86ff;            /* gradient/surface/primary-start */
  --accent-alt: #00b4ff;        /* accent/11 · gradient end */
  --accent-tint: rgba(61, 134, 255, 0.10);

  /* ── Gradients ── */
  --gradient-primary: linear-gradient(135deg, #3d86ff, #00b4ff);          /* surface + highlight-informative */
  --gradient-border-primary: linear-gradient(180deg, #ffffff, rgba(255,255,255,0.20));
  --gradient-border-secondary: linear-gradient(180deg, #e6e6e6, #d9d9d9);
  --gradient-border-tertiary: linear-gradient(180deg, #f2f2f2, #e6e6e6);
  --gradient-border-subtle: linear-gradient(180deg, rgba(255,255,255,0.20), #009bdb);
  --gradient-icon-secondary: linear-gradient(180deg, #808080, #333333);
  --gradient-icon-tertiary: linear-gradient(180deg, #cccccc, #999999);
  --gradient-icon-primary-light-fixed: linear-gradient(180deg, #ffffff, rgba(255,255,255,0.60));

  /* ── Borders ── */
  --border-secondary: #e6e6e6;
  --border-secondary-deep: #d9d9d9;
  --border-width-xs: 2px;
  --border-width-md: 3px;
  --border-width-lg: 4px;

  /* ── Radii ── */
  --radius-2xs: 8px;        /* base/2xs */
  --radius-md: 16px;        /* base/md */
  --radius-xl: 26px;        /* base/xl */
  --radius-button-sm: 12px;
  --radius-button-md: 16px;
  --radius-avatar-sm: 13px;
  --radius-avatar-md: 16px;
  --radius-avatar-xl: 26px;
  --radius-avatar-2xl: 32px;

  /* ── Sender palette (usernames / avatars) ── */
  --sender-01: #ff3d57;
  --sender-02: #c93b26;
  --sender-03: #ff7d4a;
  --sender-04: #ff9c47;
  --sender-05: #ffbb41;
  --sender-06: #a66632;
  --sender-07: #00c302;
  --sender-08: #00a962;
  --sender-09: #00c0a0;
  --sender-10: #009bdb;
  --sender-11: #3d86ff;
  --sender-12: #675cff;
  --sender-13: #c269ff;
  --sender-14: #ff4a97;

  /* ── Semantic (derived from sender palette) ── */
  --positive: #00c302; /* sender/07 */

  /* ── Interaction states ──
     The page had a bare #2f6fdd for the accent's pressed state. Named here
     so it stops being a loose hex, and so both directions press the same. */
  --accent-pressed: #2f6fdd;
  --accent-hover: #4f93ff;

  /* Motion. Kept short — this is an ad funnel, not a showreel. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/* ── Type utility classes (match Figma text styles) ── */
.t-h0 { font-size: var(--h0-size); line-height: var(--h0-line); font-weight: var(--h0-weight); letter-spacing: var(--tracking); }
.t-h2 { font-size: var(--h2-size); line-height: var(--h2-line); font-weight: var(--h2-weight); letter-spacing: var(--tracking); }
.t-h3-bold { font-size: var(--h3-size); line-height: var(--h3-line); font-weight: var(--h3-weight); letter-spacing: var(--tracking); }
.t-h4 { font-size: var(--h4-size); line-height: var(--h4-line); font-weight: var(--h4-weight); letter-spacing: var(--tracking); }
.t-h6 { font-size: var(--h6-size); line-height: var(--h6-line); font-weight: var(--h6-weight); letter-spacing: var(--tracking); }
.t-body-md { font-size: var(--body-md-size); line-height: var(--body-md-line); font-weight: var(--body-weight); letter-spacing: var(--tracking); }
.t-body-sm { font-size: var(--body-sm-size); line-height: var(--body-sm-line); font-weight: var(--body-weight); letter-spacing: var(--tracking); }
.t-body-xs { font-size: var(--body-xs-size); line-height: var(--body-xs-line); font-weight: var(--body-weight); letter-spacing: var(--tracking); }
.t-caption { font-size: var(--caption-size); line-height: var(--caption-line); font-weight: var(--caption-weight); letter-spacing: var(--tracking-caption); text-transform: uppercase; }

/* ── Sender palette utilities ──
   The app uses these 14 to keep people apart at a glance. Both funnel
   directions reuse them for the same job — one hue per person, or one hue
   per plan type. Set --sender on any element and read it from within. */
.sender-01 { --sender: var(--sender-01); }
.sender-02 { --sender: var(--sender-02); }
.sender-03 { --sender: var(--sender-03); }
.sender-04 { --sender: var(--sender-04); }
.sender-05 { --sender: var(--sender-05); }
.sender-06 { --sender: var(--sender-06); }
.sender-07 { --sender: var(--sender-07); }
.sender-08 { --sender: var(--sender-08); }
.sender-09 { --sender: var(--sender-09); }
.sender-10 { --sender: var(--sender-10); }
.sender-11 { --sender: var(--sender-11); }
.sender-12 { --sender: var(--sender-12); }
.sender-13 { --sender: var(--sender-13); }
.sender-14 { --sender: var(--sender-14); }