/* ============================================
   SantriDigitalPro — Design Tokens
   ============================================ */

:root {
  /* --- Colors: Light Mode --- */
  --bg-primary:        #F8F6F1;
  --bg-secondary:      #EFECE5;
  --bg-card:           #FFFFFF;
  --bg-card-hover:     #F4F1EA;
  --bg-overlay:        rgba(248, 246, 241, 0.92);

  --text-primary:      #1C1C1E;
  --text-secondary:    #4A4A4F;
  --text-muted:        #7A7A80;
  --text-inverse:      #FFFFFF;

  --accent:            #1A7A6E;
  --accent-hover:      #155F55;
  --accent-light:      #E8F4F2;
  --accent-muted:      rgba(26, 122, 110, 0.12);

  --border:            #E2DDD4;
  --border-strong:     #C8C3B8;
  --divider:           #EAE6DF;

  --shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:         0 4px 12px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg:         0 8px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);

  /* --- Badge Colors --- */
  --badge-sdp-bg:      #E8F4F2;
  --badge-sdp-text:    #1A7A6E;
  --badge-app-bg:      #EEF2FF;
  --badge-app-text:    #4F46E5;
  --badge-produk-bg:   #FEF3C7;
  --badge-produk-text: #92400E;
  --badge-info-bg:     #F0FDF4;
  --badge-info-text:   #166534;

  /* --- Tag colors --- */
  --tag-dakwah-bg:     #F0FDF4;
  --tag-dakwah-text:   #166534;
  --tag-mengajar-bg:   #EFF6FF;
  --tag-mengajar-text: #1D4ED8;
  --tag-bisnis-bg:     #FFF7ED;
  --tag-bisnis-text:   #C2410C;
  --tag-pemula-bg:     #FAF5FF;
  --tag-pemula-text:   #7C3AED;

  /* --- Typography --- */
  --font-heading:      'Playfair Display', Georgia, serif;
  --font-body:         'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:         'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* --- Spacing (8px grid) --- */
  --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;
  --space-20: 5rem;
  --space-24: 6rem;

  /* --- Border Radius --- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full:9999px;

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;

  /* --- Layout --- */
  --container-max:  1160px;
  --container-wide: 1320px;
  --nav-height:     64px;

  /* --- Geometric Pattern --- */
  --pattern-opacity: 0.04;
}

/* ============================================
   Dark Mode
   ============================================ */
[data-theme="dark"] {
  --bg-primary:        #0F1117;
  --bg-secondary:      #171B26;
  --bg-card:           #1C2130;
  --bg-card-hover:     #222840;
  --bg-overlay:        rgba(15, 17, 23, 0.95);

  --text-primary:      #F0EDE8;
  --text-secondary:    #A8A5A0;
  --text-muted:        #6B6968;
  --text-inverse:      #0F1117;

  --accent:            #22A897;
  --accent-hover:      #1D9487;
  --accent-light:      #0D2420;
  --accent-muted:      rgba(34, 168, 151, 0.15);

  --border:            #2A2F3E;
  --border-strong:     #3A3F50;
  --divider:           #222638;

  --shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:         0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg:         0 8px 24px rgba(0, 0, 0, 0.4);

  /* Badge colors — adjusted for dark */
  --badge-sdp-bg:      #0D2420;
  --badge-sdp-text:    #34C9B7;
  --badge-app-bg:      #1A1A3E;
  --badge-app-text:    #818CF8;
  --badge-produk-bg:   #2C1C00;
  --badge-produk-text: #FCD34D;
  --badge-info-bg:     #0A200A;
  --badge-info-text:   #4ADE80;

  --tag-dakwah-bg:     #0A200A;
  --tag-dakwah-text:   #4ADE80;
  --tag-mengajar-bg:   #0A1628;
  --tag-mengajar-text: #60A5FA;
  --tag-bisnis-bg:     #240C00;
  --tag-bisnis-text:   #FB923C;
  --tag-pemula-bg:     #1A0A2E;
  --tag-pemula-text:   #C084FC;

  --pattern-opacity: 0.06;
}