/* ShadowPOS — Color tokens
   Source of truth: apps/web-app Mantine theme (dark color scheme, primaryColor "teal" shade 8).
   These mirror Mantine v7's default dark + accent palettes so design artifacts match the live product. */

:root {
  /* ---- Brand ---- */
  --brand-graphite: #191919;   /* logo tile background */
  --brand-steel-0: #a1a1a1;    /* logo "S" highlight */
  --brand-steel-1: #6e6e6e;
  --brand-steel-2: #474747;    /* logo "S" shadow */

  /* ---- Neutral / dark scale (Mantine `dark`) ---- */
  --dark-0: #c9c9c9;  /* primary text on dark */
  --dark-1: #b8b8b8;
  --dark-2: #828282;  /* dimmed text */
  --dark-3: #696969;
  --dark-4: #424242;  /* borders */
  --dark-5: #3b3b3b;  /* hover surfaces */
  --dark-6: #2e2e2e;  /* raised cards / inputs */
  --dark-7: #242424;  /* body background */
  --dark-8: #1f1f1f;  /* sunken / header */
  --dark-9: #141414;  /* deepest */

  /* ---- Gray scale (Mantine `gray`, used in light mode + neutral accents) ---- */
  --gray-0: #f8f9fa;
  --gray-1: #f1f3f5;
  --gray-2: #e9ecef;
  --gray-3: #dee2e6;
  --gray-4: #ced4da;
  --gray-5: #adb5bd;
  --gray-6: #868e96;
  --gray-7: #495057;
  --gray-8: #343a40;
  --gray-9: #212529;

  /* ---- Primary: Teal (Mantine `teal`) ---- */
  --teal-0: #e6fcf5;
  --teal-1: #c3fae8;
  --teal-2: #96f2d7;
  --teal-3: #63e6be;
  --teal-4: #38d9a9;
  --teal-5: #20c997;
  --teal-6: #12b886;
  --teal-7: #0ca678;
  --teal-8: #099268;  /* primaryShade 8 — the product's default brand accent */
  --teal-9: #087f5b;

  /* ---- Semantic accents (Mantine palettes) ---- */
  --red-4: #ff8787;
  --red-6: #fa5252;
  --red-7: #f03e3e;
  --red-9: #c92a2a;

  --green-4: #69db7c;
  --green-6: #40c057;
  --green-8: #2f9e44;

  --orange-4: #ffa94d;
  --orange-6: #fd7e14;
  --orange-8: #e8590c;

  --yellow-4: #ffd43b;
  --yellow-6: #fab005;

  --blue-4: #4dabf7;
  --blue-6: #228be6;  /* avatars, info, links */
  --blue-8: #1971c2;

  --grape-6: #be4bdb;
  --violet-6: #7048e8;

  /* ---- Semantic aliases (dark scheme — the product's default) ---- */
  --color-bg: var(--dark-7);              /* app body */
  --color-bg-sunken: var(--dark-8);       /* header, wells */
  --color-surface: var(--dark-6);         /* cards, paper, inputs */
  --color-surface-hover: var(--dark-5);
  --color-border: var(--dark-4);
  --color-border-subtle: #2b2b2b;

  --color-text: var(--dark-0);            /* body copy */
  --color-text-strong: #ffffff;           /* titles */
  --color-text-dimmed: var(--dark-2);     /* secondary / meta */
  --color-text-on-accent: #ffffff;

  --color-accent: var(--teal-8);          /* primary brand action */
  --color-accent-hover: var(--teal-9);
  --color-accent-light: rgba(9, 146, 104, 0.15);  /* `variant="light"` fill */
  --color-accent-text: var(--teal-4);     /* accent text on dark */

  --color-success: var(--green-6);
  --color-warning: var(--orange-6);
  --color-danger: var(--red-6);
  --color-danger-strong: var(--red-9);
  --color-info: var(--blue-6);

  --color-link: var(--blue-4);
  --color-overlay: rgba(0, 0, 0, 0.55);   /* drawer/modal scrim */
}