/* iBills design tokens.
 * Light is the default; dark follows the OS unless the user picks a theme
 * (data-theme on <html>). Every colour used by the UI comes from here.
 */
:root {
  color-scheme: light;

  /* Brand: iCONA gold. The logo's #A37E12 is 3.8:1 on white, so text and
     buttons use darker shades (#85660E 5.4:1, #6B520B 7.4:1). */
  --brand:            #85660e;
  --brand-strong:     #6b520b;
  --brand-contrast:   #ffffff;

  /* Surfaces and text */
  --bg:               #f5f7fa;
  --surface:          #ffffff;
  --surface-2:        #eef1f5;
  --border:           #d5dbe3;
  --border-input:     #7d8a9a; /* form control edges: 3:1 on --surface and --bg (WCAG 1.4.11) */
  --text:             #18212b;
  --text-muted:       #5a6675;
  --focus:            #85660e;

  /* Status (text on --surface passes WCAG AA 4.5:1) */
  --ok:               #166f33;
  --ok-bg:            #e6f4ea;
  --warn:             #8a5c00;
  --warn-bg:          #fff4d6;
  --danger:           #c62828;
  --danger-bg:        #fdecea;
  --info:             #0b5394;
  --info-bg:          #e7f0fb;

  /* Type: Latin first, Arabic fallback is chosen per lang below */
  --font-latin:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", "DejaVu Sans", sans-serif;
  --font-mono:   ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font:        var(--font-latin);

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;

  /* Spacing (4px scale), radius, elevation */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.08);

  /* Layout */
  --content-max: 1100px;
  --tap:         44px;   /* minimum touch target */
}

:root:lang(ar) { --font: var(--font-arabic); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand:          #d4ae45;
    --brand-strong:   #e0bd5a;
    --brand-contrast: #0b1620;
    --bg:             #0e1116;
    --surface:        #161b22;
    --surface-2:      #1f2630;
    --border:         #2d3643;
    --border-input:   #626f80;
    --text:           #e6edf3;
    --text-muted:     #9aa7b5;
    --focus:          #e0bd5a;
    --ok:             #56d364;  --ok-bg:     #12261a;
    --warn:           #e3b341;  --warn-bg:   #2b2210;
    --danger:         #ff7b72;  --danger-bg: #2d1414;
    --info:           #79b8f7;  --info-bg:   #10233a;
    --shadow:         none;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --brand:          #d4ae45;
  --brand-strong:   #e0bd5a;
  --brand-contrast: #0b1620;
  --bg:             #0e1116;
  --surface:        #161b22;
  --surface-2:      #1f2630;
  --border:         #2d3643;
  --border-input:   #626f80;
  --text:           #e6edf3;
  --text-muted:     #9aa7b5;
  --focus:          #e0bd5a;
  --ok:             #56d364;  --ok-bg:     #12261a;
  --warn:           #e3b341;  --warn-bg:   #2b2210;
  --danger:         #ff7b72;  --danger-bg: #2d1414;
  --info:           #79b8f7;  --info-bg:   #10233a;
  --shadow:         none;
}