/* ============================================================
   QMAS — Color Tokens
   Built on Ant Design v6 palette + QMAS brand layer.
   Base scales (1=lightest … 10=darkest) → semantic aliases.
   Never use raw #000 for text or #fff for page background.
   ============================================================ */

:root {
  /* ---- Brand: QMAS ---- */
  --qmas-logo-cyan: #2BB7E4;          /* logo gradient start */
  --qmas-logo-blue: #1677FF;          /* logo gradient end */
  --qmas-logo-green: #8BC53F;         /* logo checkmark accent */
  --qmas-nav: #1950AE;                /* deep-blue navigation rail */
  --qmas-nav-hover: #2A62C0;          /* nav item hover */
  --qmas-nav-active: #11407F;         /* nav item active */
  --qmas-nav-icon: #5C82C3;           /* idle nav icon */
  --qmas-nav-icon-active: #FFFFFF;    /* active nav icon */

  /* ---- Blue (primary scale) ---- */
  --blue-1: #E6F4FF;
  --blue-2: #BAE0FF;
  --blue-3: #91CAFF;
  --blue-4: #69B1FF;
  --blue-5: #4096FF;
  --blue-6: #1677FF;
  --blue-7: #0958D9;
  --blue-8: #003EB3;
  --blue-9: #002C8C;
  --blue-10: #001D66;

  /* ---- Green (success) ---- */
  --green-1: #F6FFED;
  --green-2: #D9F7BE;
  --green-3: #B7EB8F;
  --green-4: #95DE64;
  --green-5: #73D13D;
  --green-6: #52C41A;
  --green-7: #389E0D;
  --green-8: #237804;
  --green-9: #135200;
  --green-10: #092B00;

  /* ---- Gold (warning) ---- */
  --gold-1: #FFFBE6;
  --gold-2: #FFF1B8;
  --gold-3: #FFE58F;
  --gold-4: #FFD666;
  --gold-5: #FFC53D;
  --gold-6: #FAAD14;
  --gold-7: #D48806;
  --gold-8: #AD6800;
  --gold-9: #874D00;
  --gold-10: #613400;

  /* ---- Red (error) ---- */
  --red-1: #FFF2F0;
  --red-2: #FFCCC7;
  --red-3: #FFA39E;
  --red-4: #FF7875;
  --red-5: #FF4D4F;
  --red-6: #F5222D;
  --red-7: #CF1322;
  --red-8: #A8071A;
  --red-9: #820014;
  --red-10: #5C0011;

  /* ---- Cyan (info / data viz) ---- */
  --cyan-1: #E6FFFB;
  --cyan-5: #36CFC9;
  --cyan-6: #13C2C2;
  --cyan-7: #08979C;

  /* ---- Neutral / gray scale ---- */
  --gray-1: #FFFFFF;
  --gray-2: #FAFAFA;
  --gray-3: #F5F5F5;
  --gray-4: #F0F0F0;
  --gray-5: #D9D9D9;
  --gray-6: #BFBFBF;
  --gray-7: #8C8C8C;
  --gray-8: #595959;
  --gray-9: #434343;
  --gray-10: #262626;
  --gray-13: #000000;

  /* ============================================================
     SEMANTIC ALIASES — use these in components, not raw scales.
     ============================================================ */

  /* Primary */
  --color-primary: var(--blue-6);
  --color-primary-hover: var(--blue-5);
  --color-primary-active: var(--blue-7);
  --color-primary-bg: var(--blue-1);
  --color-primary-bg-hover: var(--blue-2);
  --color-primary-border: var(--blue-3);

  /* Status */
  --color-success: var(--green-6);
  --color-success-bg: var(--green-1);
  --color-success-border: var(--green-3);
  --color-warning: var(--gold-6);
  --color-warning-bg: var(--gold-1);
  --color-warning-border: var(--gold-3);
  --color-error: var(--red-5);
  --color-error-active: #D9363E;
  --color-error-bg: var(--red-1);
  --color-error-border: var(--red-2);
  --color-info: var(--blue-6);

  /* Text — built on black with alpha, NEVER pure #000 */
  --color-text: rgba(0, 0, 0, 0.88);          /* titles, primary body */
  --color-text-secondary: rgba(0, 0, 0, 0.65); /* subtitles, helper */
  --color-text-tertiary: rgba(0, 0, 0, 0.45);  /* captions, icons */
  --color-text-quaternary: rgba(0, 0, 0, 0.25);/* disabled, placeholder */
  --color-text-light: #FFFFFF;                 /* text on solid color */

  /* Surfaces — three-layer model */
  --color-bg-layout: var(--gray-3);     /* L1: page canvas */
  --color-bg-container: var(--gray-1);  /* L2: card / panel */
  --color-bg-elevated: var(--gray-1);   /* L3: modal / dropdown / popover */
  --color-bg-spotlight: rgba(0, 0, 0, 0.85); /* tooltip */
  --color-bg-mask: rgba(0, 0, 0, 0.45); /* modal overlay */

  /* Fills — subtle surface tints */
  --color-fill: rgba(0, 0, 0, 0.15);
  --color-fill-secondary: rgba(0, 0, 0, 0.06);
  --color-fill-tertiary: rgba(0, 0, 0, 0.04);
  --color-fill-quaternary: rgba(0, 0, 0, 0.02);

  /* Borders & dividers */
  --color-border: var(--gray-5);            /* control border */
  --color-border-secondary: var(--gray-4);  /* card border, divider */
  --color-split: rgba(5, 5, 5, 0.06);       /* hairline split */

  /* Links */
  --color-link: var(--blue-6);
  --color-link-hover: var(--blue-5);
  --color-link-active: var(--blue-7);
}