/* Cambist brand palette - "Intaglio".
   Banknote engraving ink on warm note paper, with the vermilion of a serial
   number as the one signal colour. Loaded after the Industry stylesheet and
   overrides only its colour tokens, so the design system itself stays stock.

   Ramps are generated in OKLCH on the Industry system's own lightness scale,
   so every --color-*-100…900 step keeps the visual weight the components
   expect. accent  = intaglio green (hue 162)
               accent-2 = serial vermilion (hue 36) - errors and status only
               neutral  = warm paper grey (hue 100)

   Contrast on the light ground: text 14.9:1 · accent 5.6:1 · vermilion-700 6.2:1
   On the dark ground:          text 15.6:1 · accent 9.8:1 · vermilion-300 12.6:1 */

:root {
  color-scheme: light;
  --color-bg: #f5f2ec;
  --color-surface: #ece9e1;
  --color-text: #18201c;
  --color-accent: #216d4e;
  --color-accent-hover: #0f4f36;
  --color-accent-press: #083423;
  --color-accent-2: #c25335;
  --color-signal: #9e371b;            /* error text, status dot */
  --color-divider: color-mix(in srgb, #18201c 15%, transparent);

  --color-neutral-100: #f5f5f3;
  --color-neutral-200: #e8e8e5;
  --color-neutral-300: #d5d5d0;
  --color-neutral-400: #b8b8b2;
  --color-neutral-500: #9a9992;
  --color-neutral-600: #7b7b75;
  --color-neutral-700: #5f5e59;
  --color-neutral-800: #43433e;
  --color-neutral-900: #2c2c29;

  --color-accent-100: #e8faf0;
  --color-accent-200: #d0f2df;
  --color-accent-300: #aee3c7;
  --color-accent-400: #84c9a7;
  --color-accent-500: #5eab87;
  --color-accent-600: #3e8c69;
  --color-accent-700: #216d4e;
  --color-accent-800: #0f4f36;
  --color-accent-900: #083423;

  --color-accent-2-100: #fff2ee;
  --color-accent-2-200: #ffe0d8;
  --color-accent-2-300: #fec6b6;
  --color-accent-2-400: #ff987c;
  --color-accent-2-500: #e57253;
  --color-accent-2-600: #c25335;
  --color-accent-2-700: #9e371b;
  --color-accent-2-800: #75230a;
  --color-accent-2-900: #4f1505;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #18201c 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #18201c 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #18201c 22%, transparent);
}

/* Dark: the same inks on a green-black ground. Ramps are mirrored so a step
   keeps its role (100 = faint tint of the ground, 900 = strongest ink). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #0c120f;
    --color-surface: #141b18;
    --color-text: #ece9e2;
    --color-accent: #84c9a7;
    --color-accent-hover: #aee3c7;
    --color-accent-press: #d0f2df;
    --color-accent-2: #e57253;
    --color-signal: #fec6b6;
    --color-divider: color-mix(in srgb, #ece9e2 16%, transparent);

    --color-neutral-100: #2c2c29; --color-neutral-200: #43433e; --color-neutral-300: #5f5e59;
    --color-neutral-400: #7b7b75; --color-neutral-500: #9a9992; --color-neutral-600: #b8b8b2;
    --color-neutral-700: #d5d5d0; --color-neutral-800: #e8e8e5; --color-neutral-900: #f5f5f3;

    --color-accent-100: #0b2a1d; --color-accent-200: #0f4f36; --color-accent-300: #216d4e;
    --color-accent-400: #3e8c69; --color-accent-500: #5eab87; --color-accent-600: #84c9a7;
    --color-accent-700: #aee3c7; --color-accent-800: #d0f2df; --color-accent-900: #e8faf0;

    --color-accent-2-100: #3a1206; --color-accent-2-200: #75230a; --color-accent-2-300: #9e371b;
    --color-accent-2-400: #c25335; --color-accent-2-500: #e57253; --color-accent-2-600: #ff987c;
    --color-accent-2-700: #fec6b6; --color-accent-2-800: #ffe0d8; --color-accent-2-900: #fff2ee;

    --shadow-sm: 0 0 0 1px color-mix(in srgb, #ece9e2 8%, transparent);
    --shadow-md: 0 0 0 1px color-mix(in srgb, #ece9e2 10%, transparent), 0 6px 18px #0008;
    --shadow-lg: 0 0 0 1px color-mix(in srgb, #ece9e2 12%, transparent), 0 16px 40px #000a;
  }
}

/* Primary button: the base ink is already deep, so hover goes one step
   further into the ink rather than lighter (the stock system lightens). */
.btn-primary:hover  { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn-primary:active { background: var(--color-accent-press); border-color: var(--color-accent-press); }