/*
 * AfrERP theme — the ONE place colours, shadows and shapes are defined.
 *
 * Layer 1 (--vs-*) is the palette, named after VS Code's own colour ids and seeded with the
 * "Dark Modern" (charcoal) and "Light Modern" (off-white, no pure white) values, so a colour copied
 * from a VS Code theme goes straight in. Layer 2 (--page, --bg, --ink, …) is what the app's styles use
 * and is built only from layer 1. No other file may contain a colour literal; change a value here and
 * every screen, chart and printout follows. In development the page reloads this file by itself.
 */

:root {
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --radius: 6px;
  --radius-icon: 8px;
  --header: 54px;
}

/* ------------------------------------------------------------------ Light Modern (off-white) */
:root,
[data-theme="light"] {
  color-scheme: light;

  --vs-amber: #f0a202;      /* the sun of the logo */
  --vs-amber-ink: #8f5a00;  /* amber that reads as text on a light page */

  --vs-foreground: #3b3b3b;
  --vs-description-foreground: #717171;
  --vs-editor-background: #fafafa;          /* cards and forms */
  --vs-sidebar-background: #f3f3f3;         /* the canvas behind them */
  --vs-widget-background: #fdfdfd;          /* menus, dialogs, toasts */
  --vs-panel-border: #e2e2e2;
  --vs-input-border: #cecece;
  --vs-list-hover-background: #e8e8e8;
  --vs-selection-background: #add6ff;
  --vs-button-background: #005fb8;
  --vs-button-hover-background: #0258a8;
  --vs-button-foreground: #ffffff;
  --vs-link: #005fb8;
  --vs-focus-border: #005fb8;
  --vs-badge-background: #d4d4d4;
  --vs-badge-foreground: #3b3b3b;
  --vs-error: #e51400;
  --vs-warning: #bf8803;
  --vs-success: #388a34;
  --vs-info: #1a85ff;

  --vs-chart-blue: #1a85ff;
  --vs-chart-cyan: #0598bc;
  --vs-chart-green: #388a34;
  --vs-chart-yellow: #bf8803;
  --vs-chart-orange: #d18616;
  --vs-chart-red: #e51400;
  --vs-chart-purple: #652d90;
  --vs-chart-grey: #8e8e8e;

  --shadow: 0 1px 2px rgba(0, 0, 0, .08);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .14);
  --shadow-dialog: 0 18px 48px rgba(0, 0, 0, .22);
  --overlay: rgba(0, 0, 0, .32);
  --wall-veil: transparent;                  /* laid over a desktop picture; dark mode dims it so it does not glare */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23717171' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ Dark Modern (charcoal) */
[data-theme="dark"] {
  color-scheme: dark;

  --vs-amber: #ffb400;
  --vs-amber-ink: #ffc233;

  --vs-foreground: #cccccc;
  --vs-description-foreground: #9d9d9d;
  --vs-editor-background: #1f1f1f;
  --vs-sidebar-background: #181818;
  --vs-widget-background: #252526;
  --vs-panel-border: #2e2e2e;
  --vs-input-border: #3c3c3c;
  --vs-list-hover-background: #2a2d2e;
  --vs-selection-background: #264f78;
  --vs-button-background: #0078d4;
  --vs-button-hover-background: #026ec1;
  --vs-button-foreground: #ffffff;
  --vs-link: #4daafc;
  --vs-focus-border: #0078d4;
  --vs-badge-background: #4d4d4d;
  --vs-badge-foreground: #ffffff;
  --vs-error: #f85149;
  --vs-warning: #cca700;
  --vs-success: #73c991;
  --vs-info: #3794ff;

  --vs-chart-blue: #3794ff;
  --vs-chart-cyan: #29b8db;
  --vs-chart-green: #89d185;
  --vs-chart-yellow: #cca700;
  --vs-chart-orange: #d18616;
  --vs-chart-red: #f14c4c;
  --vs-chart-purple: #b180d7;
  --vs-chart-grey: #858585;

  --shadow: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .55);
  --shadow-dialog: 0 18px 48px rgba(0, 0, 0, .6);
  --overlay: rgba(0, 0, 0, .55);
  --wall-veil: rgba(0, 0, 0, .32);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239d9d9d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ the tokens the app uses */
:root {
  --page: var(--vs-sidebar-background);
  --bg: var(--vs-editor-background);
  --menu-bg: var(--vs-widget-background);
  --ink: var(--vs-foreground);
  --muted: var(--vs-description-foreground);
  --line: var(--vs-panel-border);
  --line-strong: var(--vs-input-border);
  --fill: var(--vs-list-hover-background);
  --select: var(--vs-selection-background);

  /* accent: --navy fills buttons and marks; --gold and --gold-ink colour accent text and highlights */
  --navy: var(--vs-button-background);
  --navy-hover: var(--vs-button-hover-background);
  --navy-deep: var(--vs-sidebar-background);
  --gold: var(--vs-link);
  --gold-ink: var(--vs-link);
  --gold-soft: color-mix(in srgb, var(--vs-button-background) 16%, var(--vs-editor-background));
  --brand: var(--vs-button-background);
  --brand-ink: var(--vs-link);
  --brand-soft: var(--gold-soft);
  --accent: var(--vs-chart-cyan);
  --focus: var(--vs-focus-border);
  --on-accent: var(--vs-button-foreground);   /* text on a --navy fill */
  --on-gold: var(--vs-editor-background);     /* text on a --gold fill */

  /* amber: blue stays for actions and links; amber marks where you are, what is selected, and the brand */
  --amber: var(--vs-amber);
  --amber-ink: var(--vs-amber-ink);
  --amber-soft: color-mix(in srgb, var(--vs-amber) 16%, var(--vs-editor-background));
  --on-amber: #1b1300;                        /* text on an --amber fill */

  --icon: var(--vs-button-background);
  --icon-fg: var(--vs-button-foreground);
  --icon-muted: var(--vs-description-foreground);

  /* a desktop tile: the brand colour, a little lighter on top, with a fine lit edge and a soft shadow */
  --icon-hi: color-mix(in srgb, var(--icon) 78%, white);
  --icon-gloss: color-mix(in srgb, white 30%, transparent);
  --icon-shadow: 0 8px 18px color-mix(in srgb, var(--icon) 34%, transparent);
  /* the backing behind an app's name once the desktop has a picture, so the name reads on any of them */
  --wall-label-bg: color-mix(in srgb, var(--vs-editor-background) 80%, transparent);

  /* desktop pictures a person can pick (wallpaper.js lists these ids; --wall-<id> is the picture) */
  --wall-sunrise: radial-gradient(at 12% 8%, #ffd36e 0, transparent 52%), radial-gradient(at 92% 18%, #ff7b8f 0, transparent 50%), radial-gradient(at 55% 112%, #6a4fd8 0, transparent 60%), #8a3f9a;
  --wall-savanna: radial-gradient(at 15% 10%, #ffe29a 0, transparent 50%), radial-gradient(at 90% 30%, #e0963f 0, transparent 52%), radial-gradient(at 40% 112%, #5f7a3b 0, transparent 60%), #b8793a;
  --wall-lake: radial-gradient(at 10% 10%, #9be7dd 0, transparent 50%), radial-gradient(at 90% 25%, #2a9bb0 0, transparent 52%), radial-gradient(at 50% 115%, #0b3a63 0, transparent 62%), #1b6f8f;
  --wall-dusk: radial-gradient(at 15% 8%, #8a7cf0 0, transparent 50%), radial-gradient(at 88% 22%, #b0509c 0, transparent 48%), radial-gradient(at 50% 115%, #0b0a24 0, transparent 62%), #2b2a6e;
  --wall-forest: radial-gradient(at 12% 8%, #a6d684 0, transparent 50%), radial-gradient(at 90% 28%, #3f8f6a 0, transparent 52%), radial-gradient(at 50% 115%, #0a2a21 0, transparent 62%), #2c6a4e;
  --wall-ocean: radial-gradient(at 12% 8%, #8fe3ff 0, transparent 50%), radial-gradient(at 90% 25%, #3b82d6 0, transparent 50%), radial-gradient(at 50% 115%, #081f45 0, transparent 62%), #1f5fae;
  --wall-ember: radial-gradient(at 12% 8%, #ffc27a 0, transparent 50%), radial-gradient(at 90% 25%, #e0522f 0, transparent 50%), radial-gradient(at 50% 115%, #3b0d22 0, transparent 62%), #b53a2c;
  --wall-slate: radial-gradient(at 12% 8%, #dbe3ee 0, transparent 52%), radial-gradient(at 90% 25%, #7a8ba3 0, transparent 52%), radial-gradient(at 50% 115%, #1c2431 0, transparent 62%), #5b6b82;
  --wall-sand: radial-gradient(at 12% 8%, #fff7e6 0, transparent 52%), radial-gradient(at 90% 25%, #f1d9b0 0, transparent 52%), radial-gradient(at 50% 115%, #d3b383 0, transparent 62%), #ebd3a8;
  --wall-aurora: radial-gradient(at 20% 15%, #2fe0a8 0, transparent 40%), radial-gradient(at 80% 20%, #8a5cf0 0, transparent 45%), radial-gradient(at 50% 110%, #1b5fd0 0, transparent 55%), #0a1020;
  --wall-spectrum: conic-gradient(from 0deg, #ff5a5f, #ffb400, #7bd34a, #1ec8c8, #3b82f6, #a35cf0, #ff5a5f);   /* the "pick any colour" swatch */

  --danger: var(--vs-error);
  --danger-bg: color-mix(in srgb, var(--vs-error) 16%, var(--vs-editor-background));
  --ok: var(--vs-success);
  --ok-bg: color-mix(in srgb, var(--vs-success) 16%, var(--vs-editor-background));
  --warn: var(--vs-warning);
  --warn-bg: color-mix(in srgb, var(--vs-warning) 18%, var(--vs-editor-background));
  --info: var(--vs-info);
  --badge-bg: var(--vs-badge-background);
  --badge-fg: var(--vs-badge-foreground);

  --chart-1: var(--vs-chart-blue);
  --chart-2: var(--vs-chart-cyan);
  --chart-3: var(--vs-chart-green);
  --chart-4: var(--vs-chart-yellow);
  --chart-5: var(--vs-chart-orange);
  --chart-6: var(--vs-chart-red);
  --chart-7: var(--vs-chart-purple);
  --chart-8: var(--vs-chart-grey);

  /* initials avatars: chart hues darkened so white text stays readable */
  --avatar-1: color-mix(in srgb, var(--vs-chart-blue) 60%, black);
  --avatar-2: color-mix(in srgb, var(--vs-chart-cyan) 55%, black);
  --avatar-3: color-mix(in srgb, var(--vs-chart-green) 55%, black);
  --avatar-4: color-mix(in srgb, var(--vs-chart-orange) 60%, black);
  --avatar-5: color-mix(in srgb, var(--vs-chart-red) 60%, black);
  --avatar-6: color-mix(in srgb, var(--vs-chart-purple) 60%, black);

  /* outgoing email buttons are fixed, they are not part of the app's theme */
  --email-button: #0078d4;
  --email-button-text: #ffffff;

  /* paper: printouts are always dark ink on white, whatever theme is on screen */
  --print-bg: #ffffff;
  --print-ink: #1f1f1f;
  --print-muted: #6e6e6e;
  --print-line: #d4d4d4;
  --print-fill: #eeeeee;
}