/* ============================================================
   Control Suite - new look (Ledger) tokens
   Loaded after design-tokens.css and overrides its values, so
   every token-based stylesheet (ui.css.php,
   reports.css, payroll.css ...) picks up the new look.
   New tokens are added at the bottom.
   ============================================================ */

:root {

  /* ---- Brand ---- */
  --brand:          #099267;
  --brand-hover:    #06704F;
  --brand-pale:     #E7F5EF;
  --brand-deep:     #1A1D1C;

  /* ---- Neutrals ---- */
  --charcoal:       #1A1D1C;
  --slate:          #2C302E;
  --mid:            #4A504D;
  --muted:          #858B87;
  --light:          #B5BAB7;
  --lighter:        #CDD1CE;
  --offwhite:       #F7F7F5;
  --surface:        #FAFAF8;
  --border:         #E3E4E0;
  --border-pale:    #ECECE8;
  --border-faint:   #F3F3F0;
  --white:          #FFFFFF;

  /* ---- Semantic ---- */
  --danger:         #C93A39;
  --warning:        #B26B00;
  --info:           #1F5FA6;

  /* ---- Typography ---- */
  --font:           'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:      ui-monospace, 'SF Mono', Menlo, monospace;
  --fw-semibold:    600;

  --fs-badge:       10px;
  --fs-caption:     11px;
  --fs-small:       12px;
  --fs-body:        13px;
  --fs-section-h2:  14px;
  --fs-page-title:  20px;
  --fs-stat-value:  20px;

  /* ---- Spacing ---- */
  --page-padding:   28px;
  --card-padding-y: 14px;
  --card-padding-x: 16px;
  --cell-padding-y: 10px;
  --cell-padding-x: 14px;
  --header-padding-y: 11px;
  --header-padding-x: 14px;

  /* ---- Radius ---- */
  --radius-sm:      5px;
  --radius-md:      6px;
  --radius-lg:      8px;
  --radius-card:    8px;
  --radius-shell:   10px;

  /* ---- Borders ---- */
  --border-width:   1px;
  --border-default: 1px solid #E3E4E0;
  --border-pale-line: 1px solid #ECECE8;
  --border-faint-line: 1px solid #F3F3F0;
  --border-focus:   1px solid #099267;
  --border-accent:  2px solid #9FD6C1;

  /* ---- Layout ---- */
  --sidebar-w:      232px;
  --topbar-h:       52px;
  --app-bg:         #F7F7F5;
  --card-gap:       16px;
  --grid-gap:       12px;

  /* ---- Components ---- */
  --btn-h:          32px;
  --btn-h-add:      32px;
  --input-h:        34px;
  --icon-nav:       17px;
  --icon-inline:    15px;

  /* ---- New in v2 ---- */
  --ink:            #1A1D1C;
  --ink-2:          #4A504D;
  --ink-3:          #858B87;
  --hover:          #F3F3F0;
  --brand-ink:      #06704F;
  --success-pale:   #E7F5EF;
  --danger-pale:    #FBECEC;
  --warning-pale:   #FCF2E1;
  --info-pale:      #E8F0FA;
  --shadow-sm:      0 1px 2px rgba(20, 24, 22, .05);
  --shadow-pop:     0 10px 30px rgba(20, 24, 22, .14), 0 2px 6px rgba(20, 24, 22, .06);
  --focus-ring:     0 0 0 3px #D5EEE4;
  --content-max:    1680px;
  --header-bg:      #2B3A35; /* dark green-grey header bar */
}