/* ============================================================
   DESIGN TOKENS - PETIR Web App
   Semua nilai desain terpusat di sini.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     WARNA UTAMA (Merah PETIR)
     ---------------------------------------------------------- */
  --color-primary:         #C62828;
  --color-primary-dark:    #8E0000;
  --color-primary-light:   #FF5F52;
  --color-primary-soft:    #FFEBEE;   /* background lembut */

  /* ----------------------------------------------------------
     WARNA SEKUNDER (Emas)
     ---------------------------------------------------------- */
  --color-secondary:       #F9A825;
  --color-secondary-dark:  #C17900;
  --color-secondary-soft:  #FFF8E1;

  /* ----------------------------------------------------------
     WARNA STATUS
     ---------------------------------------------------------- */
  --color-success:         #2E7D32;
  --color-success-soft:    #E8F5E9;
  --color-warning:         #EF6C00;
  --color-warning-soft:    #FFF3E0;
  --color-error:           #D32F2F;
  --color-error-soft:      #FFEBEE;
  --color-info:            #1565C0;
  --color-info-soft:       #E3F2FD;

  /* ----------------------------------------------------------
     WARNA NETRAL
     ---------------------------------------------------------- */
  --color-text:            #1A1A1A;
  --color-text-secondary:  #6B6B6B;
  --color-text-muted:      #9E9E9E;
  --color-text-inverse:    #FFFFFF;

  --color-bg:              #F5F5F5;
  --color-bg-card:         #FFFFFF;
  --color-bg-elevated:     #FFFFFF;

  --color-border:          #E0E0E0;
  --color-border-light:    #F0F0F0;
  --color-border-focus:    #C62828;

  /* ----------------------------------------------------------
     TIPOGRAFI
     ---------------------------------------------------------- */
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;   /* minimal untuk mobile */
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   36px;

  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --lh-tight:  1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* ----------------------------------------------------------
     SPACING (skala 4px)
     ---------------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     SHADOW
     ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-xl: 0 8px 24px rgba(0,0,0,0.12);

  /* ----------------------------------------------------------
     TRANSISI
     ---------------------------------------------------------- */
  --tr-fast:   150ms ease;
  --tr-normal: 250ms ease;
  --tr-slow:   400ms ease;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container-max: 480px;     /* mobile-first */
  --container-pad: 20px;
  --header-height: 64px;

  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */
  --z-header:  100;
  --z-modal:   1000;
  --z-toast:   2000;
}