/* Asaan Filer design tokens — GREEN + CHARCOAL + GOLD palette (2026-08-15).
   Logo colors: green checkmark #27AE60, charcoal A #34495E, gold #F4C430.
   System: GREEN = brand + action (buttons/links/progress) + structure (header/hero)
   CHARCOAL = dark sections (footer, sidebar rail, headings)
   GOLD = accent highlights, hover borders
   WHITE = page background, cards
   GREEN TINT = light card bg, hover states, chips
   Contrast rules:
   - TEXT-SAFE on white/#F5F7FA: --af-text, --af-dark, --af-primary, --af-accent
   - NEVER as text or small labels (AA fail): --af-blue-soft, --af-sky, --af-green
     → accents, borders, backgrounds, big icons, chips-with-dark-text only
   - WHITE TEXT only on: --af-primary, --af-accent, --af-accent-dark, --af-dark,
     --af-navy-deep */
:root {
  --af-primary:      #27AE60;  /* nav, footer, structure — GREEN */
  --af-hero-1:       #27AE60;  /* hero gradient start */
  --af-hero-2:       #1E8449;  /* hero gradient end — dark green */
  --af-accent:       #27AE60;  /* ACTION green — links, primary buttons */
  --af-accent-dark:  #1E8449;  /* hover for buttons/links */
  --af-navy-deep:    #2C3E50;  /* charcoal blocks — dark sections */
  --af-navy-deep2:   #1a252f;  /* darkest charcoal — footer */
  --af-blue-light:   #2ECC71;  /* lighter green — highlights */
  --af-blue-soft:    #82E0AA;  /* soft green — borders/underline ONLY */
  --af-gold:         #F4C430;  /* GOLD — accent highlights, hover borders */
  --af-orange:       #E67E22;  /* warm accent (sparingly) */
  --af-green:        #16A34A;  /* success icons/chips ONLY */
  --af-sky:          #27AE60;  /* info accents/chips */
  --af-dark:         #2C3E50;  /* headline text — charcoal */
  --af-black:        #1a252f;
  --af-text:         #4A5568;  /* body — AA on white */
  --af-grey-light:   #F5F7FA;  /* alt section bg */
  --af-accent-tint:  #E8F5E9;  /* light green card/hover bg — never text */
  --af-accent-tint2: #C8E6C9;  /* darker green tint — chips, bars */
  --af-wa:           #25D366;  /* WhatsApp brand green — FAB bg ONLY, white icon */
  --af-wa-dark:      #1DA851;  /* WhatsApp FAB hover */

  /* tile / photo-card backgrounds — green + charcoal family */
  --af-amber:        #E8F5E9;  /* light green tile bg */
  --af-amber-deep:   #1E8449;  /* deep green — text-safe on white */
  --af-green2:       #27AE60;
  --af-green2-deep:  #1E8449;
  --af-char:         #2C3E50;  /* charcoal tile */
  --af-char-2:       #34495E;
  --af-navy-grad:    #27AE60;
  --af-ink:          #2C3E50;  /* giant-stat block bg */
  --af-grey-border:  #D8DFEA;  /* borders, pending status */
  --af-white:        #FFFFFF;

  /* status tracker */
  --af-status-done:     var(--af-green);
  --af-status-progress: var(--af-sky);
  --af-status-pending:  var(--af-grey-border);

  /* Fonts */
  --af-font-heading: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --af-font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --af-font-number:  'Inter', 'Helvetica Neue', Arial, sans-serif;

  --af-radius: 12px;
  --af-shadow: 0 2px 12px rgba(44, 62, 80, 0.08);

  /* ---- aliases (2026-08-04) ---- */
  --af-muted:        #6B7A90;  /* halka matn — AA pass on white */
  --af-line:         #D8DFEA;  /* = --af-grey-border */
  --af-gray-light:   #F5F7FA;  /* = --af-grey-light (American hija) */
  --af-gold-light:   #FFF8DC;  /* light gold background */
}

::selection { background: var(--af-accent); color: var(--af-white); }

:focus-visible { outline: 2px solid var(--af-accent); outline-offset: 2px;
}