/* Design tokens — "כמה מרוויח?"
   White canvas, matching the actual Instagram app chrome (not the dark video
   thumbnails — those are content, this is UI). The brand still shows up in
   the vivid yellow from the banner captions and the profile's gradient ring,
   reused everywhere as a "spotlight" signature — not decoration, it marks
   whatever is currently winning (rank #1, the featured sponsor tier, the
   logged-in user's own avatar). Money-green is a second, meaning-bearing
   accent reserved for prices and earnings figures. */
:root {
  /* Colors */
  --color-bg: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-elevated-2: #F5F5F5;
  --color-text: #141414;
  --color-text-secondary: #737373;
  --color-text-tertiary: #A8A8A8;
  --color-border: #DBDBDB;
  --color-border-strong: #C7C7C7;

  --color-accent: #FFD400;
  --color-accent-hover: #E6BF00;
  --color-accent-soft: #FFF6D2;
  --color-accent-text: #8A6D00;

  --color-money: #17A863;
  --color-money-soft: #E3F9EE;

  --color-success: #17A863;
  --color-success-soft: #E3F9EE;
  --color-danger: #ED4956;
  --color-danger-soft: #FDECEC;

  --color-overlay: rgba(20, 20, 20, 0.6);

  /* Brand signature — the real gradient from the Instagram profile ring.
     Reused everywhere something is "in the spotlight": #1 on the leaderboard,
     the featured sponsorship tier, the logged-in user's avatar. */
  --color-brand-yellow: #FFD400;
  --color-brand-yellow-text: #14120A;
  --gradient-brand: conic-gradient(from 210deg, #FF7A30, #E1306C, #8134AF, #1CA7B0, #FF7A30);

  /* Radii — slightly tighter than a soft SaaS card, closer to a poster/tag feel */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Typography — a genuine Hebrew display face (Suez One) carries the poster/
     game-show energy; Heebo stays quiet and legible for body copy and UI. */
  --font-display: "Suez One", Georgia, serif;
  --font-family: "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", "Arial Hebrew", Arial, sans-serif;
  --font-size-xs: 13px;
  --font-size-sm: 15px;
  --font-size-md: 17px;
  --font-size-lg: 21px;
  --font-size-xl: 28px;
  --font-size-2xl: 40px;
  --font-size-3xl: 52px;

  --line-height-tight: 1.1;
  --line-height-normal: 1.55;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.14);
  --shadow-accent: 0 8px 24px rgba(230, 180, 0, 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Layout */
  --container-max: 720px;
  --header-height: 64px;
}