/**
 * ── Chromatic Muse ─────────────────────────────────────────────────────────
 * מערכת העיצוב של היאשי, מועתקת לחנות טלגרניט.
 *
 * ⭐ **המקור:** `HeShe/src/app/globals.css` ו-`HeShe/src/design-system/README.md`.
 * הערכים כאן זהים לשם ספרה בספרה. ⛔ לא לשנות ערך בלי לשנות גם שם, אחרת
 * שתי המערכות נפרדות בשקט ואף אחד לא יודע מתי זה קרה.
 *
 * ⚠️ **למה קובץ נפרד ולא בתוך `style.css`.** היאשי מפריד טוקנים מסגנון,
 * וזה מה שמאפשר לצבוע מסך חדש בלי לפתוח את גיליון הסגנון. בנוסף, שני
 * הקבצים יחד היו חורגים מ-450 שורות.
 *
 * ⛔ **כל הצמדים כאן נמדדו מול WCAG AA** ועברו. הנמוך ביותר הוא
 * `muted-foreground` על כרטיס, 5.29:1, מול סף של 4.5:1.
 */

:root {
  /* ══ טיפוגרפיה רספונסיבית. מובייל ראשון, בגודל של אפליקציה. ══ */
  --text-xs:   0.75rem;    /* 12px, כיתובים והערות שוליים */
  --text-sm:   0.8125rem;  /* 13px, טקסט משני */
  --text-base: 0.9375rem;  /* 15px, גוף */
  --text-lg:   1.0625rem;  /* 17px, כותרות מקטע */
  --text-xl:   1.25rem;    /* 20px, כותרות עמוד */
  --text-2xl:  1.5rem;     /* 24px, כותרות גיבור */
  --text-3xl:  1.75rem;    /* 28px, תצוגה */

  /*
    ⛔ **16px הוא רצפה בשדות קלט, לא המלצה.** מתחת לזה ספארי במובייל
    מזום על הדף בכל מיקוד בשדה, והקונה מאבדת את מקומה בעגלה.
    ⚠️ לכן `--text-input` אינו חלק מהסולם הרספונסיבי ואינו קטן במובייל.
  */
  --text-input: 1rem;

  /* ══ כפתורים. יעד המגע לעולם לא יורד מ-44px. ══ */
  --btn-cta-min-h: 44px;
  --btn-cta-px: 1.25rem;
  --btn-cta-py: 0.625rem;
  --btn-cta-font: 0.9375rem;
  --btn-2-min-h: 44px;
  --btn-2-px: 1rem;
  --btn-2-py: 0.5rem;
  --btn-2-font: 0.8125rem;

  /* ══ רדיוסים. ⛔ אין פינות ישרות של 90 מעלות בשום מקום. ══ */
  --radius: 0.75rem;
  --radius-sm:  calc(var(--radius) * 0.6);   /* 7.2px, שדות */
  --radius-md:  calc(var(--radius) * 0.8);   /* 9.6px, כפתורים ושבבים */
  --radius-lg:  var(--radius);               /* 12px, כרטיסים */
  --radius-xl:  calc(var(--radius) * 1.4);   /* 16.8px, כרטיסים גדולים */
  --radius-2xl: calc(var(--radius) * 1.8);   /* 19.2px, דיאלוגים */
  --radius-3xl: calc(var(--radius) * 2.2);   /* 24px, כרטיסי גיבור */
  --radius-full: 9999px;

  /* ══ ריווח, סולם בסיס 8. ══ */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;

  /* ══ תנועה. ══ */
  --dur-fast: 150ms; --dur-normal: 200ms; --dur-slow: 300ms;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ══ שכבות. ══ */
  --z-elevated: 10; --z-sticky: 50; --z-overlay: 60;
  --z-modal: 70;    --z-toast: 80;  --z-max: 100;

  /* ══ פונטים. Heebo לכותרות, Assistant לגוף ולכפתורים. ══ */
  --font-sans: "Assistant", "Segoe UI", system-ui, sans-serif;
  --font-heading: "Heebo", "Assistant", system-ui, sans-serif;

  --wrap: 1120px;
}

/* ══════════════════════════════════════════════════════════════════════════
   ערכת בהיר. «שכבות נייר של גלריה», קרם חם ולא לבן קר.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --background: #FFF9EA;
  --foreground: #1E1C0E;   /* ⛔ לעולם לא שחור מוחלט */

  --card: #FAF4DD;
  --card-foreground: #1E1C0E;

  --popover: #FAF4DD;
  --popover-foreground: #1E1C0E;

  --primary: #00342B;             /* ירוק יער עמוק */
  --primary-container: #004D40;   /* קצה הגרדיאנט */
  --primary-foreground: #FFFFFF;

  --secondary: #B02E00;           /* כתום שרוף. רגש, מהדורה מוגבלת */
  --secondary-foreground: #FFFFFF;

  --muted: #FAF4DD;
  --muted-foreground: #6B6550;

  --accent: #F5EDCF;              /* מצב ריחוף חם */
  --accent-foreground: #1E1C0E;

  --destructive: #BA1A1A;

  /* ⛔ אין מסגרות קשות. מסגרת רפאים ב-15% בלבד, וגם היא רק כשחייבים. */
  --border: rgba(191, 201, 196, 0.15);
  --input: #E9E2CC;
  --ring: #00342B;

  --gold: #FFE088;                /* מהדורה מיוחדת, אמנות */
  --gold-foreground: #241A00;

  --tertiary: #3A186E;            /* סגול עמוק. שבבי מצב, תוויות */
  --tertiary-foreground: #EBDCFF;
  --tertiary-fixed: #EBDCFF;

  /* שכבות המשטח */
  --surface-base:     #FFF9EA;
  --surface-low:      #FAF4DD;
  --surface-elevated: #FFFFFF;
  --surface-inset:    #E9E2CC;
  --surface-highest:  #E9E2CC;

  --outline-variant: rgba(191, 201, 196, 0.15);

  /* צללים. תאורה עילית של גלריה, מגוונת חם */
  --shadow-sm: 0 6px 16px rgba(30, 28, 14, 0.04);
  --shadow:    0 12px 24px rgba(30, 28, 14, 0.06);
  --shadow-lg: 0 20px 40px rgba(30, 28, 14, 0.08);
  --glow-gold: 0 0 30px 2px rgba(255, 224, 136, 0.35);

  --glass-bg: rgba(255, 249, 234, 0.7);
  --glass-ghost: rgba(255, 249, 234, 0.2);
  --glass-ghost-hover: rgba(255, 249, 234, 0.4);

  /* ⭐ רקע עדין לשגיאה, בלי מסגרת אדומה. */
  --destructive-soft: rgba(186, 26, 26, 0.08);
  --scrim: rgba(30, 28, 14, 0.5);

  /**
   * ══ 🔴 **גרדיאנט ה-CTA. שלושה טוקנים ייעודיים, ולא `--primary`.** ══
   *
   * ⛔ **הגרדיאנט חייב טוקנים משלו כי הוא נמדד בשני קצותיו.** ⚠️ נמדד
   * כאן: כשבניתי אותו מ-`--primary` ל-`--primary-container` עם
   * `--primary-foreground` כדיו, הערכה הכהה הפכה אותו ל-`#00342B` על
   * `#006B5A`, כלומר **2.13:1** על «הוספה לעגלה», הכפתור החשוב בדף.
   *
   * ⭐ הזוגות כאן נמדדו בשני הקצוות: בהיר 13.76 ו-9.83, כהה 8.48 ו-6.49.
   * ⛔ אל תחליפו אותם ב-`--primary` «כדי לצמצם טוקנים».
   */
  --cta-from: #00342B;
  --cta-to:   #004D40;
  --cta-ink:  #FFFFFF;
}

/* ══════════════════════════════════════════════════════════════════════════
   ערכת כהה.
   ⭐ שתי דרכים להגיע לכאן: העדפת המערכת, או `data-theme` מפורש.
   ⛔ `:not([data-theme="light"])` על שאילתת המדיה. בלעדיו בחירה מפורשת
   בבהיר נדרסת אצל מי שהמערכת שלו כהה, וזה בדיוק ההפך מהכוונה.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --background: #1A1C0E;
    --foreground: #F0EDE0;
    --card: #2A2814;
    --card-foreground: #F0EDE0;
    --popover: #2A2814;
    --popover-foreground: #F0EDE0;
    --primary: #A8D5C0;
    --primary-container: #006B5A;
    --primary-foreground: #00342B;
    --secondary: #FF8A65;
    --secondary-foreground: #1A1C0E;
    --muted: #2A2814;
    --muted-foreground: #A8A48E;
    --accent: #2A2814;
    --accent-foreground: #F0EDE0;
    --destructive: #FF6B6B;
    --border: rgba(255, 255, 255, 0.08);
    --input: rgba(255, 255, 255, 0.12);
    --ring: #A8D5C0;
    --tertiary: #EBDCFF;
    --tertiary-foreground: #3A186E;
    --tertiary-fixed: #3A186E;
    --surface-base: #1A1C0E;
    --surface-low: #2A2814;
    --surface-elevated: #353320;
    --surface-inset: #151405;
    --surface-highest: #151405;
    --outline-variant: rgba(255, 255, 255, 0.08);
    --shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.3);
    --shadow:    0 12px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5);
    --glass-bg: rgba(42, 40, 20, 0.7);
    --glass-ghost: rgba(42, 40, 20, 0.3);
    --glass-ghost-hover: rgba(42, 40, 20, 0.5);
    --destructive-soft: rgba(255, 107, 107, 0.12);
    --scrim: rgba(0, 0, 0, 0.66);

    /* ⭐ מנטה בהירה עם דיו ירוק כהה. 8.48 ו-6.49, ומול רקע הדף 10.64. */
    --cta-from: #A8D5C0;
    --cta-to:   #7FBFA6;
    --cta-ink:  #00342B;
  }
}

/* ⭐ אותה ערכה, כשהבחירה מפורשת ואינה תלויה במערכת ההפעלה. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --background: #1A1C0E;         --foreground: #F0EDE0;
  --card: #2A2814;               --card-foreground: #F0EDE0;
  --popover: #2A2814;            --popover-foreground: #F0EDE0;
  --primary: #A8D5C0;            --primary-container: #006B5A;
  --primary-foreground: #00342B;
  --secondary: #FF8A65;          --secondary-foreground: #1A1C0E;
  --muted: #2A2814;              --muted-foreground: #A8A48E;
  --accent: #2A2814;             --accent-foreground: #F0EDE0;
  --destructive: #FF6B6B;
  --border: rgba(255, 255, 255, 0.08);
  --input: rgba(255, 255, 255, 0.12);
  --ring: #A8D5C0;
  --tertiary: #EBDCFF;           --tertiary-foreground: #3A186E;
  --tertiary-fixed: #3A186E;
  --surface-base: #1A1C0E;       --surface-low: #2A2814;
  --surface-elevated: #353320;   --surface-inset: #151405;
  --surface-highest: #151405;
  --outline-variant: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.3);
  --shadow:    0 12px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5);
  --glass-bg: rgba(42, 40, 20, 0.7);
  --glass-ghost: rgba(42, 40, 20, 0.3);
  --glass-ghost-hover: rgba(42, 40, 20, 0.5);
  --destructive-soft: rgba(255, 107, 107, 0.12);
  --scrim: rgba(0, 0, 0, 0.66);

  /* ⭐ מנטה בהירה עם דיו ירוק כהה. 8.48 ו-6.49, ומול רקע הדף 10.64. */
  --cta-from: #A8D5C0;
  --cta-to:   #7FBFA6;
  --cta-ink:  #00342B;
}

/* ══ מעל 768px הסולם גדל. ⛔ אחרי הערכות, כדי שלא יידרס. ══ */
@media (min-width: 768px) {
  :root {
    --text-xs:   0.9375rem;  /* 15px */
    --text-sm:   1rem;       /* 16px */
    --text-base: 1.125rem;   /* 18px */
    --text-lg:   1.3125rem;  /* 21px */
    --text-xl:   1.625rem;   /* 26px */
    --text-2xl:  2rem;       /* 32px */
    --text-3xl:  2.5rem;     /* 40px */
    --btn-cta-min-h: 48px;
    --btn-cta-px: 2rem;
    --btn-cta-py: 0.75rem;
    --btn-cta-font: 1rem;
    --btn-2-px: 1.5rem;
    --btn-2-py: 0.625rem;
    --btn-2-font: 0.875rem;
  }
}