/* ==========================================================================
   Gassenbauer — Design Tokens
   שלוש שכבות: Primitive (ערכים גולמיים) → Semantic (משמעות) → Component
   כל רכיב צורך רק טוקנים סמנטיים/רכיביים, לעולם לא ערכים גולמיים.
   ========================================================================== */

:root {
  /* ---------- 1. PRIMITIVE — צבע ---------- */

  /* Bottle Green — צבע המותג הראשי (#43514E, מהמצגת המעודכנת) */
  --green-950: #111514;
  --green-900: #191F1E;
  --green-800: #262E2C;
  --green-700: #333D3B;
  --green-600: #43514E; /* brand */
  --green-500: #556763;
  --green-400: #6F8681;
  --green-300: #95A7A3;
  --green-200: #BDC6C4;
  --green-100: #DCE0DF;
  --green-50:  #EDEFEF;

  /* Light Green — ירוק בהיר (#A3AA6F, מהמצגת המעודכנת) — הדגשה על ירוק כהה, מספרים גדולים, קווים */
  --sage-800: #555A35;
  --sage-700: #6E7344;
  --sage-600: #899055;
  --sage-500: #A3AA6F; /* brand */
  --sage-400: #B7BD8F;
  --sage-300: #CCD0AF;
  --sage-200: #E0E3CF;
  --sage-100: #F1F2E9;

  /* Orange — צבע הדגשה מהלוגו (#D88418) */
  --orange-800: #6E3F07;
  --orange-700: #8A4E08; /* טקסט כתום על רקע בהיר (AA) */
  --orange-600: #BC6C0E;
  --orange-500: #D88418; /* brand */
  --orange-400: #E69B3A;
  --orange-300: #F0BA70;
  --orange-200: #F7D9AE;
  --orange-100: #FBEDDA;

  /* Stone — רקעים (#E0DEDB, מהמצגת המעודכנת) */
  --stone-0:   #F9F9F8;
  --stone-50:  #F2F1F0;
  --stone-100: #E0DEDB; /* page */
  --stone-200: #D5D2CE; /* brand stone */
  --stone-300: #C7C4BF;
  --stone-400: #BAB8B2; /* logo grey */
  --stone-500: #9C9991;

  /* Sky — שלישוני, לשרטוטים ורקעי מידע (מהברושור) */
  --sky-100: #E4ECEE;
  --sky-300: #BACCD2;
  --sky-600: #5F7E89;

  /* Feedback */
  --red-600: #B03E2A;
  --red-100: #F6E1DC;

  /* ---------- 1. PRIMITIVE — טיפוגרפיה ---------- */
  --font-family: "FUP Begin", "Assistant", "Arial Hebrew", sans-serif;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* סקאלה פלואידית: 360px → 1440px */
  --fs-mega:  clamp(3.5rem, 1.6rem + 8.4vw, 10rem);    /* 56 → 160 */
  --fs-d1:    clamp(2.75rem, 1.6rem + 5vw, 6.5rem);    /* 44 → 104 */
  --fs-d2:    clamp(2.25rem, 1.5rem + 3.3vw, 4.5rem);  /* 36 → 72 */
  --fs-h1:    clamp(2rem, 1.5rem + 2.1vw, 3.5rem);     /* 32 → 56 */
  --fs-h2:    clamp(1.625rem, 1.35rem + 1.2vw, 2.5rem);/* 26 → 40 */
  --fs-h3:    clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem); /* 22 → 28 */
  --fs-h4:    clamp(1.1875rem, 1.12rem + 0.3vw, 1.375rem); /* 19 → 22 */
  --fs-lead:  clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);   /* 20 → 24 */
  --fs-body:  clamp(1.0625rem, 1.03rem + 0.16vw, 1.1875rem); /* 17 → 19 */
  --fs-small: 0.9375rem; /* 15 */
  --fs-label: 0.8125rem; /* 13 */

  --lh-tight: 0.95;
  --lh-display: 1.02;
  --lh-heading: 1.15;
  --lh-body: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.18em;

  /* ---------- 1. PRIMITIVE — מרווח (בסיס 4px) ---------- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 2.5rem;   /* 40 */
  --space-8: 3rem;     /* 48 */
  --space-9: 4rem;     /* 64 */
  --space-10: 5rem;    /* 80 */
  --space-11: 6rem;    /* 96 */
  --space-12: 8rem;    /* 128 */
  --space-13: 10rem;   /* 160 */

  /* ---------- 1. PRIMITIVE — צורה ---------- */
  --radius-0: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  --hairline: 1px;
  --rule: 2px;

  /* ---------- 1. PRIMITIVE — תנועה ---------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-draw: cubic-bezier(0.45, 0, 0.15, 1);

  --dur-instant: 120ms;
  --dur-fast: 220ms;
  --dur-base: 420ms;
  --dur-slow: 800ms;
  --dur-slower: 1400ms;
  --stagger: 70ms;

  /* ==========================================================================
     2. SEMANTIC — ברירת מחדל: משטח בהיר (אבן)
     ========================================================================== */
  --color-bg: var(--stone-100);
  --color-bg-raised: var(--stone-0);
  --color-bg-sunken: var(--stone-200);
  --color-bg-inverse: var(--green-600);
  --color-bg-accent: var(--orange-500);

  --color-text: var(--green-800);
  --color-text-strong: var(--green-900);
  --color-text-muted: var(--green-600);
  --color-text-subtle: var(--green-500);
  --color-text-inverse: var(--stone-50);
  --color-text-accent: var(--orange-700);
  --color-text-on-accent: var(--green-900);

  --color-line: rgba(38, 46, 44, 0.16);
  --color-line-strong: rgba(38, 46, 44, 0.36);
  --color-line-accent: var(--orange-500);

  --color-accent: var(--orange-500);
  --color-accent-hover: var(--orange-400);
  --color-secondary: var(--sage-500);
  --color-accent-2: var(--sage-500);      /* ירוק בהיר — דקורטיבי: מספרים גדולים, קווים */
  --color-accent-2-text: var(--sage-700); /* ירוק בהיר כטקסט על רקע בהיר (AA לטקסט גדול) */
  --color-focus: var(--orange-500);

  --color-success: var(--sage-700);
  --color-error: var(--red-600);
  --color-error-bg: var(--red-100);

  --logo-accent: var(--orange-500);
  --logo-ink: var(--green-600);

  /* ---------- 2. SEMANTIC — טיפוגרפיה ---------- */
  --text-display-family: var(--font-family);
  --text-display-weight: var(--weight-extrabold);
  --text-heading-weight: var(--weight-bold);
  --text-body-weight: var(--weight-regular);
  --text-label-weight: var(--weight-semibold);

  /* ---------- 2. SEMANTIC — פריסה ---------- */
  --container-max: 1440px;
  --container-narrow: 860px;
  --gutter: clamp(1rem, 0.5rem + 2.2vw, 2.5rem);
  --grid-cols: 12;
  --grid-gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
  --section-y: clamp(5rem, 3rem + 7vw, 10rem);
  --section-y-sm: clamp(3rem, 2rem + 4vw, 6rem);
  --header-h: 84px;

  /* ---------- 2. SEMANTIC — עומק ---------- */
  --shadow-sm: 0 1px 2px rgba(20, 26, 23, 0.06), 0 2px 8px rgba(20, 26, 23, 0.05);
  --shadow-md: 0 4px 12px rgba(20, 26, 23, 0.07), 0 16px 40px rgba(20, 26, 23, 0.08);
  --shadow-lg: 0 12px 24px rgba(20, 26, 23, 0.10), 0 40px 80px rgba(20, 26, 23, 0.14);

  /* ==========================================================================
     3. COMPONENT
     ========================================================================== */
  --btn-h: 3.5rem;
  --btn-h-sm: 2.75rem;
  --btn-px: 1.75rem;
  --btn-radius: var(--radius-0);
  --btn-font-size: 1.0625rem;
  --btn-weight: var(--weight-bold);

  --field-h: 3.75rem;
  --field-radius: var(--radius-0);
  --field-bg: transparent;
  --field-border: var(--color-line-strong);
  --field-border-focus: var(--color-text-strong);

  --card-radius: var(--radius-0);
  --card-pad: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  --card-bg: var(--color-bg-raised);

  --fab-size: 4rem;
}

/* ==========================================================================
   משטחים — מחליפים רק טוקנים סמנטיים; רכיבים מתאימים את עצמם אוטומטית
   ========================================================================== */
[data-surface="dark"] {
  --color-bg: var(--green-600);
  --color-bg-raised: var(--green-700);
  --color-bg-sunken: var(--green-800);
  --color-bg-inverse: var(--stone-100);
  --color-text: var(--stone-100);
  --color-text-strong: var(--stone-0);
  --color-text-muted: var(--green-200);
  --color-text-subtle: var(--green-300);
  --color-text-inverse: var(--green-800);
  --color-text-accent: var(--sage-300);
  --color-accent-2: var(--sage-500);
  --color-accent-2-text: var(--sage-500);
  --color-line: rgba(224, 222, 219, 0.18);
  --color-line-strong: rgba(224, 222, 219, 0.4);
  --color-success: var(--sage-400);
  --color-error: #F08A72;
  --color-error-bg: rgba(240, 138, 114, 0.12);
  --logo-ink: var(--stone-400);
  --field-border: var(--color-line-strong);
  --field-border-focus: var(--stone-0);
  --card-bg: var(--color-bg-raised);
}

[data-surface="deep"] {
  --color-bg: var(--green-900);
  --color-bg-raised: var(--green-800);
  --color-bg-sunken: var(--green-950);
  --color-text: var(--stone-100);
  --color-text-strong: var(--stone-0);
  --color-text-muted: var(--green-200);
  --color-text-subtle: var(--green-300);
  --color-text-accent: var(--sage-300);
  --color-accent-2: var(--sage-500);
  --color-accent-2-text: var(--sage-500);
  --color-line: rgba(224, 222, 219, 0.14);
  --color-line-strong: rgba(224, 222, 219, 0.34);
  --logo-ink: var(--stone-400);
  --field-border-focus: var(--stone-0);
  --card-bg: var(--color-bg-raised);
}

[data-surface="sage"] {
  --color-bg: var(--sage-500);
  --color-bg-raised: var(--sage-300);
  --color-text: var(--green-900);
  --color-text-strong: var(--green-950);
  --color-text-muted: var(--green-700);
  --color-text-subtle: var(--green-600);
  --color-text-accent: var(--green-950);
  --color-line: rgba(20, 26, 23, 0.18);
  --color-line-strong: rgba(20, 26, 23, 0.4);
  --card-bg: var(--sage-200);
}

/* משטח בהיר — מאפס את כל טוקני הטקסט, כדי שיעבוד גם כשהוא בתוך משטח כהה (למשל טופס בסקשן ירוק) */
[data-surface="paper"], [data-surface="light"] {
  --color-bg: var(--stone-50);
  --color-bg-raised: var(--stone-0);
  --color-bg-sunken: var(--stone-200);
  --color-text: var(--green-800);
  --color-text-strong: var(--green-900);
  --color-text-muted: var(--green-600);
  --color-text-subtle: var(--green-500);
  --color-text-accent: var(--orange-700);
  --color-line: rgba(39, 48, 43, 0.16);
  --color-line-strong: rgba(39, 48, 43, 0.42);
  --color-success: var(--sage-700);
  --color-error: var(--red-600);
  --color-error-bg: var(--red-100);
  --logo-ink: var(--green-600);
  --field-border: var(--color-line-strong);
  --field-border-focus: var(--green-900);
  --card-bg: var(--stone-50);
}
[data-surface="light"] { --color-bg: var(--stone-100); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-slower: 0ms;
    --stagger: 0ms;
  }
}