/* gigit landing — design tokens (primitive → semantic → component).
   Mirrors the variables in the Figma file "gigit · Landing"
   (figma.com/design/MGpTJMa8bWLoaAAwzBSKDt). Primitives come from lib/theme.ts
   so the page and the app captures share one palette.
   Contrast (WCAG 2.1): text-secondary on bg-subtle 6.2:1, text-link on white
   6.3:1, white on accent 4.85:1, on-band-muted on band 5.6:1, input border 3.5:1. */

:root {
  /* ── Layer 1: primitives ── */
  --neutral-0: #FFFFFF;
  --neutral-25: #FAFAF8;
  --neutral-50: #F4F3EF;
  --neutral-200: #E8E6E1;
  --neutral-450: #8E8980;
  --neutral-500: #6F6A61;
  --neutral-600: #5F5A52;
  --neutral-900: #1B1712;

  --brown-50: #F3EDE2;
  --brown-100: #F1E6D2;
  --brown-200: #D9C7A5;
  --brown-500: #8A6D3B;
  --brown-600: #755C31;
  --brown-700: #6F5630;
  --brown-800: #5C4724;

  --gold-300: #E8D6B7;
  --cream-100: #F4EDE1;

  --green-50: #E6EFE6;
  --green-600: #3F6B45;
  --red-600: #A8503A;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-24: 96px;

  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px;

  --font-family: "IBM Plex Sans Hebrew", "Noto Sans Hebrew", "Arial Hebrew", system-ui, sans-serif;
  --font-ios: -apple-system, BlinkMacSystemFont, "SF Pro Text", "IBM Plex Sans Hebrew", system-ui, sans-serif;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layer 2: semantic ── */
  --bg-page: var(--neutral-0);
  --bg-subtle: var(--neutral-50);
  --bg-accent: var(--brown-500);
  --bg-accent-soft: var(--brown-50);
  --bg-band: var(--brown-700);
  --bg-success-soft: var(--green-50);
  --bg-inverse: var(--neutral-900);

  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary: var(--neutral-500);
  --text-link: var(--brown-600);
  --text-on-accent: var(--neutral-0);
  --text-on-band-muted: var(--brown-100);
  --text-success: var(--green-600);
  --text-danger: var(--red-600);
  /* על דיו (כרטיס הכסף): זהב 12.5:1, משני 8.6:1 */
  --text-on-inverse: var(--cream-100);
  --text-on-inverse-muted: rgb(244 237 225 / .72);
  --text-on-inverse-accent: var(--gold-300);
  --inverse-divider: rgb(244 237 225 / .14);

  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-450);
  --border-accent: var(--brown-500);
  --focus-ring: var(--brown-200);

  --space-section: clamp(var(--space-16), 8vw, var(--space-24));
  --space-gutter: clamp(var(--space-5), 3vw, var(--space-6));

  --z-float: 10;
  --z-sticky: 20;

  /* ── Layer 3: component ── */
  --button-primary-bg: var(--bg-accent);
  --button-primary-bg-hover: var(--brown-800);
  --button-primary-fg: var(--text-on-accent);
  --button-outline-border: var(--border-accent);
  --button-outline-fg: var(--text-link);
  --button-height: 52px;
  --button-radius: var(--radius-pill);

  --card-bg: var(--bg-page);
  --card-border: var(--border-default);
  --card-radius: var(--radius-md);
  --card-padding: var(--space-6);

  --input-border: var(--border-strong);
  --input-border-focus: var(--border-accent);
  --input-radius: var(--radius-sm);
  --input-height: 48px;

  --plan-featured-border: var(--border-accent);
  --phone-frame: var(--bg-inverse);
  --widget-width: 272px;
  --widget-radius: 22px;
  --widget-bg: rgb(250 250 248 / .84);
  --widget-edge: rgb(255 255 255 / .7);
  --widget-shadow: 0 14px 34px -14px rgb(27 23 18 / .38), 0 2px 6px -2px rgb(27 23 18 / .12);
  --step-duration: 3000ms;
  --check-icon: var(--text-success);
}