@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

/* The only file allowed to contain a colour, radius, shadow or font literal. Everything else uses these.
   Mikky brand: docs/ui-spec.md, taken from the Mikky design mockups. */
:root {
  /* palette */
  --white: #FFFFFF;
  --n50: #F8F7F5;      /* sidebar, soft surfaces, row hover */
  --n100: #F0EEEB;     /* table header, plain pills, hover on the sidebar */
  --n200: #E2DFDA;     /* lines and borders */
  --n300: #CFCBC4;
  --n400: #B4B0A9;     /* placeholders */
  --n500: #8A867F;
  --n600: #5F5C57;     /* secondary text */
  --ink: #17171A;
  --red: #BF3326;      /* Mikky red: primary button fill, links, the sidebar bar, the bell count */
  --red-hover: #94271C;
  --red-tint: #FCF1EF;
  --red-border: #F4D6D1;
  --red-text: #94271C;
  --green: #2D6A4A;    /* success only */
  --green-tint: #EEF5F0;
  --green-border: #D5E6DB;
  --green-text: #2D6A4A;
  --amber: #5F5C57;    /* retired: anything still asking for amber gets neutral grey */
  --alert: #BF3326;

  /* top bar */
  --topbar-field: #2A2A2E;
  --topbar-line: #4A4A50;

  /* Home tiles and icon circles */
  --tile-orange: #FDF1E7;  --tile-orange-text: #9A4A12;
  --tile-pink: #FCEEF3;    --tile-pink-text: #A12A55;
  --tile-blue: #EAF3FB;    --tile-blue-text: #1F5C91;
  --tile-green: #EEF5F0;   --tile-green-text: #2D6A4A;
  --tile-purple: #F1EEFB;  --tile-purple-text: #5638A3;

  /* WhatsApp message preview: imitates WhatsApp's own look, so it keeps WhatsApp's colours */
  --wa-chat-bg: #EFEAE2;
  --wa-link: #0B73A8;
  --wa-media-bg: #E9EDEF;
  --wa-media-fg: #888888;

  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* roles, built only from the palette */
  --bg-app: var(--white);
  --bg-panel: var(--white);
  --bg-hover: var(--n50);
  --color-text: var(--ink);
  --color-text-muted: var(--n600);
  --color-border: var(--n200);
  --color-border-strong: var(--n200);
  --color-link: var(--red);
  --scrim: color-mix(in srgb, var(--ink) 35%, transparent);

  /* neutrals */
  --color-neutral-50: var(--n50);
  --color-neutral-100: var(--n100);
  --color-neutral-200: var(--n100);
  --color-neutral-300: var(--n300);
  --color-neutral-400: var(--n400);
  --color-neutral-500: var(--n600);
  --color-neutral-700: var(--n600);
  --color-neutral-800: var(--ink);

  /* the one accent: Mikky red. A fill with white text on top, or a mark (selected edge, sidebar bar) */
  --color-accent: var(--red);
  --color-accent-hover: var(--red-hover);
  --color-on-accent: var(--white);
  --color-accent-50: var(--n50);
  --color-accent-100: var(--n100);
  --color-accent-200: var(--n200);
  --color-accent-300: var(--n200);
  --color-accent-500: var(--ink);       /* focus ring */
  --color-accent-700: var(--red-text);

  /* status: green = good, red = needs you, grey = waiting or off. Always a dot or words with it, never colour alone */
  --good: var(--green);   --good-bg: var(--green-tint);  --good-border: var(--green-border);
  --warn: var(--n600);    --warn-bg: var(--n100);        --warn-border: var(--n200);
  --bad:  var(--red);     --bad-bg:  var(--red-tint);    --bad-border:  var(--red-border);
  --off:  var(--n600);    --off-bg:  var(--n100);        --off-border:  var(--n200);

  /* type scale: page titles 28, card titles 20, body 14, tables 14, labels 12 */
  --fs-title: 28px; --fs-section: 20px; --fs-body: 14px; --fs-table: 14px; --fs-label: 12px;

  /* 8px grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  --radius-md: 12px;     /* inputs, menu items */
  --radius-nav: 14px;    /* sidebar items */
  --radius-lg: 20px;     /* tables, tiles, dialogs, filter panel */
  --radius-xl: 28px;     /* the white sheet and the big cards */
  --radius-full: 999px;  /* buttons, search, badges, chips, dots */
  --radius-card: var(--radius-lg);
  --radius-ctl: var(--radius-md);
  --radius-btn: var(--radius-full);
  --radius-pill: var(--radius-full);

  /* the one shadow: dropdowns, side panels, dialogs. Nothing else casts one. */
  --shadow: 0 8px 24px color-mix(in srgb, var(--ink) 12%, transparent);

  --row-h: 58px;
  --sidebar-w: 244px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 72px;
}