/* אתר ב-490: טוקנים של המותג.
   דף הנחיתה, הדשבורד, השאלון והמודעות נבנים מהקובץ הזה. ההחלטות מתועדות ב-brand/brand.md.
   לא לשנות ערכים כאן בלי לעדכן את brand.md. */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700;800&display=swap');

:root {
  /* צבעים */
  --a490-ink:   #23224F; /* דיו: טקסט, כותרות, הלוגו, רקע כהה (פוטר, מודעה כהה) */
  --a490-blue:  #3F3AB8; /* פעולה: כפתור ראשי, קישורים, פוקוס. לבן על כחול 8.4:1 */
  --a490-green: #1E9E5A; /* הפס מתחת ל-490, וי, מצב "סגור". רק גרפיקה ורכיבים גדולים. לא טקסט */
  --a490-paper: #F3F3F8; /* רקע של סקשנים. לא לטקסט */
  --a490-muted: #5A5A7A; /* טקסט משני, תג "נבנה ב" על רקע בהיר. 6.6:1 על לבן */
  --a490-line:  #D8D8E6; /* גבולות ומפרידים. לא לטקסט */
  --a490-white: #FFFFFF;

  /* תפקידים */
  --a490-bg: var(--a490-white);
  --a490-fg: var(--a490-ink);
  --a490-fg-muted: var(--a490-muted);
  --a490-action: var(--a490-blue);
  --a490-action-fg: var(--a490-white);
  --a490-focus: 0 0 0 3px var(--a490-white), 0 0 0 6px var(--a490-blue);

  /* גופן. Rubik לכל דבר, מכותרת ועד שדה טופס. */
  --a490-font: 'Rubik', 'Heebo', Arial, sans-serif;
  --a490-w-regular: 400;
  --a490-w-medium: 500;   /* כפתורים, תוויות */
  --a490-w-bold: 700;     /* תת-כותרות */
  --a490-w-black: 800;    /* כותרת ראשית, המספר 490 */

  /* סולם גדלים, מובייל (390) */
  --a490-fs-price: 4.5rem;   /* 72px. המספר 490 לבד */
  --a490-fs-display: 3rem;   /* 48px. כותרת גיבור במודעה */
  --a490-fs-h1: 2rem;        /* 32px */
  --a490-fs-h2: 1.5rem;      /* 24px */
  --a490-fs-h3: 1.1875rem;   /* 19px */
  --a490-fs-body: 1.0625rem; /* 17px */
  --a490-fs-small: 0.875rem; /* 14px */
  --a490-lh-tight: 1.1;
  --a490-lh-heading: 1.2;
  --a490-lh-body: 1.55;

  /* רדיוסים. התג של הלוגו מעוגל ב-20% מגובהו, הכפתורים מחקים אותו. */
  --a490-radius-s: 8px;    /* שדות, תגיות */
  --a490-radius-m: 14px;   /* כפתורים, קופסאות */
  --a490-radius-l: 24px;   /* קופסאות גדולות, תמונות */
  --a490-radius-pill: 999px;

  /* ריווח, מכפלות של 4 */
  --a490-s1: 4px;
  --a490-s2: 8px;
  --a490-s3: 12px;
  --a490-s4: 16px;
  --a490-s5: 24px;
  --a490-s6: 32px;
  --a490-s7: 48px;
  --a490-s8: 64px;
  --a490-s9: 96px;
  --a490-gutter: 16px;   /* שוליים במובייל */
  --a490-measure: 34rem; /* רוחב שורה מקסימלי לטקסט רץ */
  --a490-tap: 44px;      /* אזור לחיצה מינימלי */

  /* הלוגו */
  --a490-logo-min-h: 24px;   /* מתחת לזה משתמשים בסימן בלבד */
  --a490-mark-min: 24px;
  --a490-badge-h: 22px;
}

@media (min-width: 760px) {
  :root {
    --a490-fs-price: 7rem;      /* 112px */
    --a490-fs-display: 4.5rem;  /* 72px */
    --a490-fs-h1: 3rem;         /* 48px */
    --a490-fs-h2: 2rem;         /* 32px */
    --a490-fs-h3: 1.375rem;     /* 22px */
    --a490-fs-body: 1.125rem;   /* 18px */
    --a490-fs-small: 0.9375rem; /* 15px */
    --a490-gutter: 32px;
  }
}

/* משטח כהה: פוטר, מודעה כהה. הלוגו שם הוא logo-light.svg */
.a490-dark {
  --a490-bg: var(--a490-ink);
  --a490-fg: var(--a490-white);
  --a490-fg-muted: #C9C8E6; /* 9.1:1 על דיו */
  --a490-action: var(--a490-white);
  --a490-action-fg: var(--a490-ink);
  --a490-focus: 0 0 0 3px var(--a490-ink), 0 0 0 6px var(--a490-white);
  background: var(--a490-bg);
  color: var(--a490-fg);
}