/* Menchi Dimsum — colour tokens.
   Source of truth: frontend/src/styles/design-tokens.css.
   Channel triplets (`--color-*`) are kept for `rgb(var(--x) / a)` composition;
   `--c-*` hex aliases are the ergonomic form for plain CSS/HTML. */
:root {
  /* ---- channel triplets (R, G, B) ---- */
  --color-primary-50: 244, 248, 245;
  --color-primary-100: 236, 243, 238;
  --color-primary-200: 210, 224, 214;
  --color-primary-300: 170, 196, 177;
  --color-primary-400: 105, 145, 115;
  --color-primary-500: 47, 93, 58;
  --color-primary-600: 39, 79, 50;
  --color-primary-700: 31, 65, 41;
  --color-primary-800: 31, 65, 41;
  --color-primary-900: 31, 65, 41;

  --color-accent-orange: 232, 154, 91;
  --color-accent-soft-orange: 243, 194, 155;
  --color-accent-deep-orange: 212, 90, 28;

  --color-slate-0: 255, 255, 255;
  --color-slate-25: 246, 241, 232;
  --color-slate-50: 246, 241, 232;
  --color-slate-75: 239, 231, 218;
  --color-slate-100: 229, 222, 211;
  --color-slate-150: 239, 231, 218;
  --color-slate-200: 229, 222, 211;
  --color-slate-300: 196, 181, 161;
  --color-slate-400: 107, 125, 110;
  --color-slate-500: 107, 125, 110;
  --color-slate-600: 47, 93, 58;
  --color-slate-700: 47, 93, 58;
  --color-slate-800: 39, 79, 50;
  --color-slate-900: 47, 93, 58;

  --color-paper-50: 250, 248, 245;
  --color-paper-100: 250, 235, 230;

  --color-success-50: 240, 253, 244;
  --color-success-100: 220, 252, 231;
  --color-success-500: 22, 163, 74;
  --color-success-550: 5, 150, 105;
  --color-success-600: 45, 138, 78;
  --color-success-700: 22, 101, 52;

  --color-warning-bg: 243, 194, 155;
  --color-warning-border: 232, 154, 91;
  --color-warning-100: 254, 243, 199;
  --color-warning-500: 245, 158, 11;
  --color-warning-700: 146, 64, 14;

  --color-danger-50: 254, 242, 242;
  --color-danger-100: 254, 226, 226;
  --color-danger-200: 254, 202, 202;
  --color-danger-500: 220, 38, 38;
  --color-danger-550: 201, 61, 61;
  --color-danger-600: 220, 38, 38;
  --color-danger-700: 185, 28, 28;
  --color-danger-750: 169, 50, 50;

  --color-info-bg: 239, 231, 218;
  --color-info-border: 229, 222, 211;

  --color-utility-600: 124, 58, 237;
  --color-utility-700: 51, 65, 85;

  /* ---- hex aliases: brand core ---- */
  --c-green-50: #f4f8f5;
  --c-green-100: #ecf3ee;
  --c-green-200: #d2e0d6;
  --c-green-300: #aac4b1;
  --c-green-400: #699173;
  --c-green-500: #2f5d3a;   /* brand green — logo wordmark + primary action */
  --c-green-600: #274f32;
  --c-green-700: #1f4129;

  --c-orange: #e89a5b;      /* logo chilli-oil orange */
  --c-orange-soft: #f3c29b; /* logo wrapper tint */
  --c-orange-deep: #d45a1c;

  --c-cream: #f6f1e8;       /* app canvas — logo panel cream */
  --c-cream-75: #efe7da;
  --c-sand: #e5ded3;        /* hairline borders */
  --c-sage: #6b7d6e;        /* secondary text */
  --c-white: #ffffff;

  /* ---- semantic aliases ---- */
  --text-heading: var(--c-green-500);
  --text-body: var(--c-green-500);
  --text-muted: var(--c-sage);
  --text-inverse: var(--c-white);
  --text-danger: #c93d3d;
  --text-link: var(--c-green-600);
  --text-link-hover: var(--c-green-700);

  --surface-canvas: var(--c-cream);
  --surface-card: var(--c-white);
  --surface-sunken: var(--c-cream-75);
  --surface-rail: var(--c-sand);
  --surface-accent: var(--c-orange-soft);
  --surface-inverse: var(--c-green-500);

  --border-hairline: var(--c-sand);
  --border-strong: var(--c-green-500);
  --border-subtle: #ecf3ee;

  --action-primary: var(--c-green-500);
  --action-primary-hover: var(--c-green-600);
  --action-primary-active: var(--c-green-700);
  --action-danger: #1f4129;
  --focus-ring: rgb(var(--color-primary-500) / 0.30);

  /* App canvas wash — two warm radial glows over the cream base. */
  --surface-canvas-wash:
    radial-gradient(circle at 10% 20%, rgba(243, 194, 155, 0.32), transparent 18rem),
    radial-gradient(circle at 96% 0%, rgba(47, 93, 58, 0.08), transparent 22rem),
    #f6f1e8;
}