/* ==========================================================================
   DESIGN TOKENS — Warung Nasi Kuning
   Semua variabel warna, spacing, typography, shadows di sini.
   ========================================================================== */

:root {
    /* ── Colors: Brand ─────────────────────────────── */
    --color-primary:        #F9A825;
    --color-primary-light:  #FFF8E1;
    --color-primary-pale:   #FFFDE7;
    --color-primary-dark:   #F57F17;
    --color-primary-hover:  #FFD54F;
    --color-primary-active: #FFE082;

    /* ── Colors: Sidebar ───────────────────────────── */
    --sidebar-bg:           #FFF8E1;
    --sidebar-active-bg:    #FFD54F;
    --sidebar-hover-bg:     #FFECB3;
    --sidebar-text:         #5D4037;
    --sidebar-text-active:  #3E2723;
    --sidebar-width:        260px;

    /* ── Colors: UI ────────────────────────────────── */
    --color-bg:             #F5F6FA;
    --color-surface:        #FFFFFF;
    --color-border:         #E8E8E8;
    --color-border-light:   #F0F0F0;

    /* ── Colors: Text ──────────────────────────────── */
    --color-text-primary:   #1A1A2E;
    --color-text-secondary: #6B7280;
    --color-text-muted:     #9CA3AF;
    --color-text-white:     #FFFFFF;

    /* ── Colors: Semantic ──────────────────────────── */
    --color-success:        #22C55E;
    --color-success-bg:     #F0FDF4;
    --color-success-text:   #166534;

    --color-danger:         #EF4444;
    --color-danger-bg:      #FEF2F2;
    --color-danger-text:    #DC2626;

    --color-warning:        #F59E0B;
    --color-warning-bg:     #FFFBEB;
    --color-warning-text:   #D97706;

    --color-info:           #3B82F6;
    --color-info-bg:        #EFF6FF;
    --color-info-text:      #2563EB;

    /* ── Colors: Chart ─────────────────────────────── */
    --chart-line:           #F9A825;
    --chart-fill-start:     rgba(249, 168, 37, 0.25);
    --chart-fill-end:       rgba(249, 168, 37, 0.02);
    --chart-grid:           #F0F0F0;
    --chart-dot:            #F57F17;

    /* ── Colors: Summary Cards ─────────────────────── */
    --card-sales-bg:        linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
    --card-sales-icon:      #F9A825;
    --card-orders-bg:       linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
    --card-orders-icon:     #42A5F5;
    --card-profit-bg:       linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
    --card-profit-icon:     #66BB6A;
    --card-stock-bg:        linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
    --card-stock-icon:      #FFA726;

    /* ── Typography ────────────────────────────────── */
    --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs:         0.75rem;    /* 12px */
    --font-size-sm:         0.8125rem;  /* 13px */
    --font-size-base:       0.875rem;   /* 14px */
    --font-size-md:         1rem;       /* 16px */
    --font-size-lg:         1.125rem;   /* 18px */
    --font-size-xl:         1.5rem;     /* 24px */
    --font-size-2xl:        1.75rem;    /* 28px */
    --font-size-3xl:        2rem;       /* 32px */

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight:    1.25;
    --line-height-normal:   1.5;
    --line-height-relaxed:  1.75;

    /* ── Spacing ───────────────────────────────────── */
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */

    /* ── Border Radius ─────────────────────────────── */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* ── Shadows ───────────────────────────────────── */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-lg:   0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-xl:   0 8px 32px rgba(0, 0, 0, 0.10);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);

    /* ── Transitions ───────────────────────────────── */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   350ms ease;

    /* ── Z-Index ───────────────────────────────────── */
    --z-sidebar:    100;
    --z-header:     90;
    --z-dropdown:   200;
    --z-overlay:    300;
    --z-modal:      400;
    --z-tooltip:    500;
}