/* ============================================================
   tokens.css — Brand design tokens for MBS e-Parkir
   Load this FIRST on every page, before any other stylesheet.
   ============================================================ */

:root {
    /* ── Brand colours ── */
    --color-yellow:       #F5C518;
    --color-yellow-hover: #ffd22e;
    --color-red:          #C0392B;
    --color-red-dark:     #c0222a;
    --color-blue-link:    #0F4C9E;
    --color-blue-info:    #185FA5;

    /* ── Backgrounds ── */
    --color-dark-bg:      #1a1a1a;
    --color-panel-dark:   #444;
    --color-panel-mid:    #333;
    --color-surface:      #f4f3f0;   /* auth pages */
    --color-surface-warm: #f5f0e8;   /* dashboard main area */
    --color-surface-card: #fafaf8;   /* panel/card headers */

    /* ── Borders ── */
    --color-border-dark:  #2a2a2a;
    --color-border-light: #e0dfd8;
    --color-border-panel: #f0ede6;   /* inner panel dividers */
    --color-border-ui:    #ddd;

    /* ── Text ── */
    --color-text-primary: #111;
    --color-text-muted:   #888;
    --color-text-faint:   #666;
    --color-text-light:   #fff;
    --color-text-yellow:  #F5C518;
    --color-text-dim:     #aaa;
    --color-text-pale:    #bbb;

    /* ── Feedback ── */
    --color-error-text:    #721c24;
    --color-error-bg:      #fff0f0;
    --color-error-border:  #f5c1c1;
    --color-success-text:  #155724;
    --color-success-bg:    #d4edda;
    --color-success-border:#c3e6cb;

    /* ── Status colours ── */
    --color-status-pending-bar:  #e6a800;
    --color-status-approved-bar: #3B6D11;
    --color-status-complete-bar: #007bff;
    --color-status-rejected-bar: #c0222a;

    /* ── Typography ── */
    --font-ui:      'IBM Plex Sans', 'Segoe UI', sans-serif;
    --font-display: 'DM Serif Display', serif;

    /* ── Radius ── */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-xl: 8px;
}