/* ==========================================================================
   MODSCALE HR · Design tokens
   The single source of truth for colour, type, spacing and elevation.
   Nothing else in the CSS may contain a raw hex value.

   Palette reasoning:
     shell   — deep charcoal-brown, the ModScale sidebar and topbar
     paper   — warm off-white content ground, never pure #FFF
     brass   — the accent: warm gold at a saturation that survives on both
               the dark shell and the cream content area
   ========================================================================== */

:root {
  /* ---- Brand -------------------------------------------------------------
     Sampled directly from the ModScale CRM so HR reads as the same system.
       rail        #1C150F     header / dark surface  #2B2118
       page        #F7F2E8     card                   #FCF8F1
       band        #F3EADB     ink                    #241D14
       crown gold  #F0B952     — carries DARK text, as on the CRM's +LEAD
     The logo's own sand (#EBDFCA) is the text colour on dark surfaces.
     ---------------------------------------------------------------------- */
  --ms-shell:        #1C150F;   /* sidebar rail */
  --ms-shell-raised: #2B2118;   /* topbar, dark tiles, dark buttons */
  --ms-shell-deep:   #14100B;   /* rail hover / footer */
  --ms-shell-line:   #3D3123;   /* dividers and inputs on dark */
  --ms-shell-text:   #EBDFCA;   /* the logo's sand */
  --ms-shell-muted:  #9C8A73;

  --ms-brass:        #F0B952;   /* the crown gold, exactly */
  --ms-brass-hover:  #E3A93C;
  --ms-brass-ink:    #2B2118;   /* text ON gold — never white */
  --ms-brass-deep:   #8A6520;   /* same hue darkened, for links on cream */
  --ms-brass-lit:    #F0B952;
  --ms-brass-wash:   #FAEBCB;   /* the CRM's warm tint */
  --ms-brass-line:   #E8D3A4;
  --ms-sand:         #EBDFCA;
  --ms-sand-edge:    #CAAF95;

  /* ---- Content surfaces --------------------------------------------- */
  --ms-paper:        #F7F2E8;   /* page ground */
  --ms-card:         #FCF8F1;   /* cards, tables, panels */
  --ms-card-alt:     #F3EADB;   /* header bands, zebra rows */
  --ms-sunken:       #EDE4D4;   /* inset wells, inactive tabs */

  /* ---- Ink ----------------------------------------------------------- */
  --ms-ink:          #241D14;
  --ms-body:         #453A2C;
  --ms-muted:        #7A6A56;
  --ms-faint:        #A2947D;

  /* ---- Lines --------------------------------------------------------- */
  --ms-line:         #E4D9C4;
  --ms-line-soft:    #EFE7D8;
  --ms-line-strong:  #CAAF95;

  /* ---- Semantic — tinted the CRM way, warm rather than clinical ------- */
  --ms-ok:           #4A6B3F;
  --ms-ok-bg:        #E7EBD9;
  --ms-ok-line:      #CBD6B6;

  --ms-warn:         #9A6714;
  --ms-warn-bg:      #FAEBCB;
  --ms-warn-line:    #EAD3A0;

  --ms-stop:         #A84420;
  --ms-stop-bg:      #F6E2D6;
  --ms-stop-line:    #E6C4B0;

  --ms-info:         #35617A;
  --ms-info-bg:      #E4EDF2;
  --ms-info-line:    #C2D5DF;

  --ms-neutral:      #6E6252;
  --ms-neutral-bg:   #EFE7D8;
  --ms-neutral-line: #DCD0BB;

  /* ---- Type ---------------------------------------------------------- */
  --ms-font-display: "Marcellus", "Times New Roman", Georgia, serif;
  --ms-font-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
                     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ms-font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo,
                     Consolas, monospace;

  --ms-text-xs:   11.5px;
  --ms-text-sm:   13px;
  --ms-text-base: 14.5px;
  --ms-text-md:   16px;
  --ms-text-lg:   19px;
  --ms-text-xl:   24px;
  --ms-text-2xl:  30px;
  --ms-text-3xl:  38px;

  --ms-leading-tight: 1.25;
  --ms-leading:       1.6;

  /* ---- Space (4px base) ---------------------------------------------- */
  --ms-1:  4px;
  --ms-2:  8px;
  --ms-3:  12px;
  --ms-4:  16px;
  --ms-5:  20px;
  --ms-6:  24px;
  --ms-8:  32px;
  --ms-10: 40px;
  --ms-12: 48px;
  --ms-16: 64px;

  /* ---- Radius & elevation -------------------------------------------- */
  --ms-radius-sm: 3px;
  --ms-radius:    5px;
  --ms-radius-lg: 8px;
  --ms-radius-pill: 999px;

  --ms-shadow-sm: 0 1px 2px rgba(31, 26, 22, .05);
  --ms-shadow:    0 1px 2px rgba(31, 26, 22, .04), 0 6px 16px -10px rgba(31, 26, 22, .22);
  --ms-shadow-lg: 0 2px 4px rgba(31, 26, 22, .05), 0 18px 40px -20px rgba(31, 26, 22, .32);
  --ms-shadow-shell: 0 0 0 1px rgba(0, 0, 0, .16);

  /* ---- Layout -------------------------------------------------------- */
  --ms-sidebar:       248px;
  --ms-sidebar-slim:  72px;
  --ms-topbar:        62px;
  --ms-content-max:   1440px;

  /* ---- Motion -------------------------------------------------------- */
  --ms-fast:   120ms cubic-bezier(.4, 0, .2, 1);
  --ms-normal: 200ms cubic-bezier(.4, 0, .2, 1);

  /* ---- Z-index ladder ------------------------------------------------- */
  --ms-z-sidebar: 40;
  --ms-z-topbar:  30;
  --ms-z-dropdown:60;
  --ms-z-overlay: 80;
  --ms-z-modal:   90;
  --ms-z-toast:   100;
}

/* --------------------------------------------------------------------------
   Print: the payslip and reports are designed to be saved as PDF, so the
   print sheet resets the shell colours to plain ink on white.
   -------------------------------------------------------------------------- */
@media print {
  :root {
    --ms-paper: #FFFFFF;
    --ms-card:  #FFFFFF;
    --ms-card-alt: #FFFFFF;
    --ms-ink:   #000000;
    --ms-body:  #1A1A1A;
    --ms-muted: #444444;
    --ms-line:  #B9B0A0;
    --ms-shadow: none;
    --ms-shadow-sm: none;
    --ms-shadow-lg: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --ms-fast: 1ms; --ms-normal: 1ms; }
}