/* RubanBill - design tokens. No rules here, only custom properties.
   Brand: primary #e69829 (orange) + accent #102b45 (navy).
   RPS canonical aliases (--color-*) allow cross-platform code to use standard names. */

:root {
    /* ── Brand palette ── */
    --bill-primary:       #e69829;
    --bill-primary-dark:  #cb7c11;
    --bill-primary-light: #fff1dd;
    --bill-accent:        #102b45;
    --bill-accent-soft:   #e7eef6;

    /* ── Neutral scale ── */
    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* ── Semantic role tokens ── */
    --surface:    #ffffff;
    --surface-2:  #f4f6f9;
    --border:     #e5e7eb;
    --text:       #1f2937;
    --text-muted: #6b7280;
    --success:    #22c55e;
    --danger:     #ef4444;
    --warning:    #f59e0b;
    --info:       #3b82f6;

    /* ── Legacy aliases (existing style.css rules reference these) ── */
    --primary:        var(--bill-primary);
    --primary-dark:   var(--bill-primary-dark);
    --primary-light:  var(--bill-primary-light);
    --accent:         var(--bill-accent);
    --accent-soft:    var(--bill-accent-soft);
    --text-dark:      var(--text);
    --white:          #ffffff;
    --bg:             var(--surface-2);

    /* ── RPS canonical aliases (cross-platform standard names) ── */
    --color-primary:  var(--bill-primary);
    --color-danger:   var(--danger);
    --color-warning:  var(--warning);
    --color-info:     var(--info);
    --color-success:  var(--success);
    --color-text:     var(--text);
    --color-muted:    var(--text-muted);
    --color-border:   var(--border);
    --color-surface:  var(--surface);
    --color-bg:       var(--surface-2);

    /* ── Spacing scale (4px base) ── */
    --space-1: 4px;  --space-2: 8px;   --space-3: 12px;
    --space-4: 16px; --space-5: 24px;  --space-6: 32px;
    --space-7: 48px; --space-8: 64px;

    /* ── Typography ── */
    --fs-xs:  0.75rem;  --fs-sm:  0.875rem; --fs-base: 1rem;
    --fs-lg:  1.125rem; --fs-xl:  1.25rem;  --fs-2xl:  1.5rem; --fs-3xl: 1.875rem;
    --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

    /* ── Layout ── */
    --shell-max:    900px;
    --sidebar-w:    260px;
    --topbar-h:     62px;
    --bottomnav-h:  60px;

    /* ── Radii + elevation ── */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-full: 9999px;
    --radius:      var(--radius-md);

    --shadow-sm: 0 1px 3px rgba(16, 43, 69, .06);
    --shadow-md: 0 2px 16px rgba(16, 43, 69, .09);
    --shadow-lg: 0 4px 24px rgba(16, 43, 69, .12);
    --shadow:    var(--shadow-md);

    /* ── Misc ── */
    --transition: all 0.3s ease;
}

[data-theme="dark"] {
    --surface:    #1f2937;
    --surface-2:  #111827;
    --border:     #374151;
    --text:       #f9fafb;
    --text-dark:  #f9fafb;
    --text-muted: #9ca3af;
    --bg:         var(--surface-2);

    /* Semantic colors override for dark mode (lighter variants for readability) */
    --success: #4ade80;
    --danger:  #f87171;
    --warning: #fbbf24;
    --info:    #60a5fa;

    --color-text:    #f9fafb;
    --color-muted:   #9ca3af;
    --color-surface: #1f2937;
    --color-bg:      #111827;
    --color-border:  #374151;
    --color-danger:  #f87171;
    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --color-info:    #60a5fa;
}