/**
 * Karjuya Design Tokens — Exact 1:1 Parity with Figma Dev Mode
 * File: Karjuya (Copy) (Copy) — Canvas: karjuya rebrand - 05/24/2026 (#2004:1817)
 * Frames: Web 1920 – 1 (#2004:1823), Web 1920 – 2 (#2004:11749), Web 1920 – 3 (#2004:13197)
 */

:root {
  /* ============================================================
     1. BRAND COLORS (From Figma GLOBAL_VARS)
     ============================================================ */
  --ds-color-brand-primary:      #6B4DCA; /* Figma fill_73b9b4eb */
  --ds-color-brand-hover:        #5A3EB5;
  --ds-color-brand-active:       #412CAB;
  --ds-color-brand-soft:         #8A7AF8; /* Figma fill_03a73d87 */
  --ds-color-brand-purple-light: #8576EE; /* Figma fill_1138c5d2 */
  --ds-color-brand-tint:         rgba(107, 77, 202, 0.12); /* Nav pill active tint */

  --ds-color-brand-coral:        #EF6A54; /* Figma fill_2973bb68 */
  --ds-color-brand-coral-hover:  #E0533C;
  --ds-color-brand-coral-tint:   rgba(239, 106, 84, 0.14);

  --ds-color-brand-amber:        #FFAE28; /* Figma fill_5fb21cfc */
  --ds-color-brand-yellow:       #FDBA14; /* Figma fill_626ae9a5 (Alibaba) */
  --ds-color-brand-red:          #EF394E; /* Figma Digikala */
  --ds-color-brand-orange:       #F15A22; /* Figma Tapsi */
  --ds-color-brand-teal:         #00DACB;

  /* ============================================================
     2. SURFACES & BACKGROUNDS
     ============================================================ */
  --ds-surface-page:             #F3F4F9; /* Figma canvas fill_64484b3f */
  --ds-surface-card:             #FFFFFF; /* Figma fill_658ab2fa */
  --ds-surface-band:             #E9ECEF; /* Figma fill_35a84415 (Jobs band, KB banner, Footer) */
  --ds-surface-pill:             #ECEEF0; /* Figma fill_979f250e (Price & action badges) */
  --ds-surface-active-card:      #334155; /* Figma active feature card fill_dcace0a8 */

  /* ============================================================
     3. TEXT COLORS
     ============================================================ */
  --ds-text-heading:             #334155; /* Figma fill_dcace0a8 */
  --ds-text-body:                #64748B; /* Figma fill_ba795e8a */
  --ds-text-nav:                 #284258; /* Figma fill_14a6d1ae */
  --ds-text-footer:              #44474E; /* Figma fill_f5dfca1b */
  --ds-text-copyright:           #62666D; /* Figma fill_b6007cea */
  --ds-text-price:               #BD3E2C; /* Figma fill_45db88e8 */
  --ds-text-inverted:            #FFFFFF;

  /* ============================================================
     4. BORDERS & DIVIDERS
     ============================================================ */
  --ds-border-default:           #CBD5E1;
  --ds-border-light:             #ECEEF0;
  --ds-border-divider:           #B1B9C5; /* Figma fill_9b40ee95 */
  --ds-border-search:            rgba(100, 116, 139, 0.40);

  /* ============================================================
     5. SHADOWS & EFFECTS (Exact Figma Dev Mode effects)
     ============================================================ */
  --ds-shadow-header:            0px 15px 32px 0px rgba(40, 66, 88, 0.08); /* effect_46f90ae3 */
  --ds-shadow-card:              0px 10px 25px 0px rgba(51, 65, 85, 0.03); /* effect_0c2712fc */
  --ds-shadow-hero-art:          0px 10px 35px 0px rgba(65, 44, 171, 0.20); /* effect_cf2d9960 */
  --ds-shadow-active-tab:        0px 10px 20px 0px rgba(51, 65, 85, 0.20); /* effect_377bfb7b */
  --ds-shadow-btn-primary:       0px 15px 20px 0px rgba(65, 44, 171, 0.30);
  --ds-shadow-btn-coral:         0px 6px 18px 0px rgba(239, 106, 84, 0.35);
  --ds-shadow-pill-hover:        0px 8px 20px 0px rgba(107, 77, 202, 0.25);

  /* ============================================================
     6. RADII
     ============================================================ */
  --ds-radius-card:              30px;
  --ds-radius-card-sm:           20px;
  --ds-radius-pill:              9999px;
  --ds-radius-footer:            50px 50px 0px 0px;
  --ds-radius-badge:             10px;

  /* ============================================================
     7. TYPOGRAPHY
     ============================================================ */
  --ds-font-persian:             "Ravi", "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ds-font-latin:               "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ds-font-display:             "Montserrat", "Inter", sans-serif;

  /* ============================================================
     8. LAYOUT CONTAINERS
     ============================================================ */
  --ds-container-max:            1530px;
  --ds-header-max:               1820px;
}