/* ==========================================================================
   DESIGN TOKENS
   Single source of truth for the design system. When a new Figma frame
   introduces a new color/spacing/radius, add the token here first —
   never hard-code a raw value inside a page or component file.
   ========================================================================== */
:root {
  /* --- Typography --- */
  --font-main: 'Fredoka', sans-serif;
  --font-assistant: 'Assistant', sans-serif;
  --font-poppins: 'Poppins', sans-serif;
  --font-manrope: 'Manrope', sans-serif;

  /* --- Color Palette --- */
  --color-primary-navy: #000080;
  --color-profile-text: #3A3A55;
  --color-pink-btn: #D55A9E;
  --color-pink-gradient-end: #B85089;
  --color-pink-accent: #CB6DA7;
  --color-pink-soft-bg: #F4D9E8;
  --color-border-icon: #D0D5DD;
  --color-blue-soft-bg: #CFE7F0;
  --color-green-soft-bg: rgba(190, 225, 218, 0.75);
  --color-white: #FFFFFF;
  --color-bg-page: #F4F4F4;
  --color-bg-page-alt: #EFEFEF;

  /* Added for Cart - Sign in (Figma, Aug 2026) */
  --color-magenta-accent: #C22DAF;
  --color-magenta-soft-bg: #F6DEEC;
  --color-input-bg: rgba(0, 0, 128, 0.1); /* #0000801A */
  --color-text-slate: #183B51;
  --color-tab-selected-bg: #A1CEE1;
  --color-bg-summary-card: #FAF9F5;
  --color-badge-green-bg: rgba(190, 225, 218, 0.55); /* #BEE1DA8C */
  --color-icon-wave-bg: #EEEEFC; /* order-summary decorative plan icon (e.g. "מנוי חינמי") */
  --color-border-checkbox: #C4C5D9;
  --color-border-checkbox-strong: #000080; /* navy variant, e.g. the business-purchase checkbox */
  --color-section-border: rgba(0, 0, 128, 0.08); /* subtle 1px card border, e.g. accordion sections */

  /* Added for Personal Area - My Orders (Figma, Aug 2026) */
  --color-table-header-bg: rgba(230, 230, 250, 0.67); /* #E6E6FAAA */
  --color-table-border: #E3E3E3;
  --color-table-text: #183B51;
  --color-pagination-inactive-bg: #E7D3EB;

  /* Added for Personal Area - Dashboard / Courses / Certificates /
     Downloads / Favorites (Figma, Aug 2026) */
  --color-mint-bg: #DCEEE6;
  --color-mint-border: #8FBFAE;

  /* Homepage "מה מעסיק אתכם היום?" scattered bubble cloud — each of the
     six embroidery-style dashed-border themes used across the 14
     bubbles (HP design). */
  --color-bubble-rose-bg: #F6E1E8;
  --color-bubble-rose-border: #D98BA6;
  --color-bubble-olive-bg: #EDEEE0;
  --color-bubble-olive-border: #7C8B63;
  --color-bubble-navy-bg: #E6EDF2;
  --color-bubble-navy-border: #2C5F8A;
  --color-bubble-purple-bg: #EEE9F5;
  --color-bubble-purple-border: #A896D1;
  --color-bubble-maroon-bg: #F7EAE8;
  --color-bubble-maroon-border: #B8615A;
  --color-bubble-tan-bg: #F5EEDD;
  --color-bubble-tan-border: #C4A876;
  --color-mint-text: #2F7A63;
  --color-lavender-card-bg: #EDEAFB;
  --color-lavender-card-border: #D98FC4;
  --color-status-badge-bg: #000080;
  --color-status-active-dot: #A9ADC7;
  --color-status-success: #4C9A82;
  --color-favorite-icon-bg-a: #EEEEFC;
  --color-favorite-icon-bg-b: #DCEEE6;
  --color-tab-active-bg: #12213D;

  /* Added for LogIn (Figma, Aug 2026) */
  --color-auth-border: #A9C6D9;
  --color-auth-input-bg: #E2DAE6;
  --color-auth-panel-bg: #FAF9F5;

  /* Added for Contact Us (Figma, Aug 2026) */
  --color-contact-form-bg: #FBF0EF;
  --color-whatsapp-green: #E7F5EA;
  --color-whatsapp-green-text: #1F7A3D;

  /* Added for Sign In / pricing page (Figma, Aug 2026) */
  --color-plan-business-bg: #F9E9F3;
  --color-plan-business-border: #E3A9CF;
  --color-plan-personal-bg: #DCEEF5;
  --color-plan-personal-border: #6FA9C4;
  --color-plan-free-bg: #DDF0E7;
  --color-plan-free-border: #8FC8AC;
  --color-star-gold: #F4B740;

  /* Added for General Content page (Figma, Aug 2026) */
  --color-value-badge-a: #B8A8D9;
  --color-value-badge-b: #E7A9C9;
  --color-value-badge-c: #7FB0C9;

  /* Added for Blog page (Figma, Aug 2026) */
  --color-blog-hero-bg: #FBF0EF;

  /* Added for Course page (Figma, Aug 2026) */
  --color-course-feature-a: #DCEEF5;
  --color-course-feature-b: #EDEAFB;
  --color-course-feature-c: #DCEEE6;

  /* Semantic aliases — prefer these in component/page CSS */
  --color-text-heading: var(--color-primary-navy);
  --color-text-body: var(--color-profile-text);
  --bg-header: rgba(255, 255, 255, 0.55);

  /* --- Spacing scale (4px base) --- */
  --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;

  /* --- Radius scale --- */
  --radius-sm: 4px;
  --radius-input: 8px;
  --radius-badge: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-pill: 90px;
  --radius-pill-100: 100px; /* exact Figma value used on Cart - Sign in CTAs */
  --radius-round: 50%;

  /* --- Shadows --- */
  --shadow-card: 0px 4px 20px rgba(0, 0, 0, 0.03);
  --shadow-btn: 0px 4px 14px rgba(203, 109, 167, 0.35);
  --shadow-btn-hover: 0px 6px 18px rgba(203, 109, 167, 0.45);

  /* --- Layout --- */
  --header-height: 100px;
  --footer-min-height: 420px;
  --container-max: 1920px; /* "full" — outer bound for header/footer/main-content */
  --container-inner-max: 1860px; /* "container/inner" — nested inside the full bound; used by the header nav row and by wide marketing-page sections */
  --content-max: 1172px;

  /* --- Breakpoints (referenced in comments; used via media queries) ---
     mobile:  up to 767px
     tablet:  768px – 1023px
     desktop: 1024px+
  ------------------------------------------------------------------------ */

  /* --- Z-index scale --- */
  --z-base: 1;
  --z-decoration: 1;
  --z-content: 5;
  --z-header: 1000;
  --z-modal: 2000;
  --z-tooltip: 2100;
}