/* =======================================================================
   Darwinbox Sapien Design System (SDS) — Design Tokens
   Colors, Type, Spacing, Radii, Borders, Shadows
   =======================================================================
   Pulled from @darwinbox-inc/dbx-ui-components (Sapien DS).
   Theme: darwin-blue (default). 7 other themes available (see bottom).
   ======================================================================= */

/* ---------- FONT FACE: DarwinSans ---------- */
@font-face {
  font-family: 'DarwinSans';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('fonts/darwinsans-light.woff') format('woff'),
       url('fonts/darwinsans-light.ttf') format('truetype');
}
@font-face {
  font-family: 'DarwinSans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/darwinsans-book.woff') format('woff'),
       url('fonts/darwinsans-book.ttf') format('truetype');
}
@font-face {
  font-family: 'DarwinSans';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('fonts/darwinsans-medium.woff') format('woff'),
       url('fonts/darwinsans-medium.ttf') format('truetype');
}
@font-face {
  font-family: 'DarwinSans';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/darwinsans-bold.woff') format('woff'),
       url('fonts/darwinsans-bold.ttf') format('truetype');
}
@font-face {
  font-family: 'DarwinSans';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('fonts/darwinsans-extra-bold.woff') format('woff'),
       url('fonts/darwinsans-extra-bold.ttf') format('truetype');
}

:root {
  /* ====================================================================
     BRAND COLORS — primary neutrals + identity
     ==================================================================== */
  --sds-charcol-0:   #FAFAFA;
  --sds-charcol-10:  #F5F6F7;
  --sds-charcol-20:  #EDEFF1;
  --sds-charcol-30:  #D4D8DE;
  --sds-charcol-40:  #A9B2BC;
  --sds-charcol-50:  #7C8A98;
  --sds-charcol-60:  #546274;
  --sds-charcol-70:  #3D4A5C;
  --sds-charcol-80:  #2A3648;
  --sds-charcol-90:  #1C2738;
  --sds-charcol-100: #0F1829;

  --sds-white:       #FFFFFF;
  --sds-black:       #000000;

  /* Brand blue (default theme: darwin-blue) */
  --sds-brand-blue-10:  #EBF2FF;
  --sds-brand-blue-20:  #C7DCFF;
  --sds-brand-blue-30:  #94BAFF;
  --sds-brand-blue-40:  #5F93FF;
  --sds-brand-blue-50:  #2E6CFF;
  --sds-brand-blue-60:  #1A4EDB;   /* primary brand */
  --sds-brand-blue-70:  #0E3AB2;
  --sds-brand-blue-80:  #062B8C;
  --sds-brand-blue-90:  #021E6B;

  /* Brand green (success) */
  --sds-brand-green-10: #E8F7EE;
  --sds-brand-green-20: #BEEACE;
  --sds-brand-green-30: #86D4A8;
  --sds-brand-green-40: #4FBA82;
  --sds-brand-green-50: #2A9D60;
  --sds-brand-green-60: #17834A;
  --sds-brand-green-70: #0B683A;
  --sds-brand-green-80: #034E2A;

  /* Brand red (danger) */
  --sds-brand-red-10:  #FEECEC;
  --sds-brand-red-20:  #FBC9C9;
  --sds-brand-red-30:  #F59B9B;
  --sds-brand-red-40:  #ED6B6B;
  --sds-brand-red-50:  #DC3B3B;
  --sds-brand-red-60:  #B92222;
  --sds-brand-red-70:  #8F1717;
  --sds-brand-red-80:  #6C0E0E;

  /* Brand yellow (warning) */
  --sds-brand-yellow-10: #FFF7DE;
  --sds-brand-yellow-20: #FFE89A;
  --sds-brand-yellow-30: #FFD45A;
  --sds-brand-yellow-40: #F5B820;
  --sds-brand-yellow-50: #D9970A;
  --sds-brand-yellow-60: #AD7600;
  --sds-brand-yellow-70: #7F5400;

  /* ====================================================================
     CUSTOM COLORS — themed (currently bound to darwin-blue)
     These rebind per theme. See theme classes at bottom.
     ==================================================================== */
  --sds-custom-10:  var(--sds-brand-blue-10);
  --sds-custom-20:  var(--sds-brand-blue-20);
  --sds-custom-30:  var(--sds-brand-blue-30);
  --sds-custom-40:  var(--sds-brand-blue-40);
  --sds-custom-50:  var(--sds-brand-blue-50);
  --sds-custom-60:  var(--sds-brand-blue-60);  /* theme primary */
  --sds-custom-70:  var(--sds-brand-blue-70);
  --sds-custom-80:  var(--sds-brand-blue-80);
  --sds-custom-90:  var(--sds-brand-blue-90);

  /* ====================================================================
     POP COLORS — decorative / categorical. Use for tags, avatars, charts.
     Never for primary actions.
     ==================================================================== */
  --sds-pop-coral:      #FF6B5B;
  --sds-pop-coral-bg:   #FFEBE8;
  --sds-pop-amber:      #F59A3C;
  --sds-pop-amber-bg:   #FEF1E0;
  --sds-pop-mustard:    #C9A21B;
  --sds-pop-mustard-bg: #FBF5DA;
  --sds-pop-moss:       #5B9C3A;
  --sds-pop-moss-bg:    #E6F3DD;
  --sds-pop-teal:       #22A8A3;
  --sds-pop-teal-bg:    #DFF4F3;
  --sds-pop-sky:        #2F8DE0;
  --sds-pop-sky-bg:     #E2F0FC;
  --sds-pop-indigo:     #5B6BE1;
  --sds-pop-indigo-bg:  #E6E9FB;
  --sds-pop-violet:     #8A56D3;
  --sds-pop-violet-bg:  #EFE5FA;
  --sds-pop-magenta:    #C44A9C;
  --sds-pop-magenta-bg: #FBE4F1;
  --sds-pop-slate:      #6B7A8A;
  --sds-pop-slate-bg:   #ECEFF2;

  /* ====================================================================
     SEMANTIC SURFACES — the tokens you reach for 90% of the time
     ==================================================================== */
  --sds-bg-app:        var(--sds-charcol-10);
  --sds-bg-surface:    var(--sds-white);
  --sds-bg-subtle:     var(--sds-charcol-10);
  --sds-bg-muted:      var(--sds-charcol-20);
  --sds-bg-inverse:    var(--sds-charcol-100);

  --sds-fg-primary:    var(--sds-charcol-100);
  --sds-fg-secondary:  var(--sds-charcol-70);
  --sds-fg-tertiary:   var(--sds-charcol-50);
  --sds-fg-disabled:   var(--sds-charcol-40);
  --sds-fg-inverse:    var(--sds-white);
  --sds-fg-link:       var(--sds-custom-60);

  --sds-border-subtle:   var(--sds-charcol-20);
  --sds-border-default:  var(--sds-charcol-30);
  --sds-border-strong:   var(--sds-charcol-40);
  --sds-border-focus:    var(--sds-custom-60);

  /* Status (intent) surfaces */
  --sds-success-bg:   var(--sds-brand-green-10);
  --sds-success-fg:   var(--sds-brand-green-60);
  --sds-success-br:   var(--sds-brand-green-30);
  --sds-danger-bg:    var(--sds-brand-red-10);
  --sds-danger-fg:    var(--sds-brand-red-60);
  --sds-danger-br:    var(--sds-brand-red-30);
  --sds-warning-bg:   var(--sds-brand-yellow-10);
  --sds-warning-fg:   var(--sds-brand-yellow-60);
  --sds-warning-br:   var(--sds-brand-yellow-30);
  --sds-info-bg:      var(--sds-brand-blue-10);
  --sds-info-fg:      var(--sds-brand-blue-60);
  --sds-info-br:      var(--sds-brand-blue-30);

  /* ====================================================================
     TYPOGRAPHY
     ==================================================================== */
  --sds-font-family: 'DarwinSans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Font sizes (px) — a modular scale */
  --sds-fs-8:  8px;
  --sds-fs-10: 10px;
  --sds-fs-12: 12px;   /* caption */
  --sds-fs-14: 14px;   /* body-sm */
  --sds-fs-16: 16px;   /* body */
  --sds-fs-20: 20px;   /* title-sm */
  --sds-fs-24: 24px;   /* title */
  --sds-fs-32: 32px;   /* headline */
  --sds-fs-40: 40px;   /* display-sm */
  --sds-fs-48: 48px;   /* display */

  /* Line-heights */
  --sds-lh-tight:   1.2;
  --sds-lh-snug:    1.35;
  --sds-lh-normal:  1.5;
  --sds-lh-loose:   1.65;

  /* Weights */
  --sds-fw-light:      300;
  --sds-fw-book:       400;
  --sds-fw-medium:     500;
  --sds-fw-bold:       700;
  --sds-fw-extra-bold: 800;

  /* Tracking */
  --sds-ls-tight:  -0.01em;
  --sds-ls-normal:  0;
  --sds-ls-wide:   0.02em;
  --sds-ls-caps:   0.06em;

  /* ====================================================================
     SPACING — dense 4pt-based scale
     ==================================================================== */
  --sds-sp-0:   0px;
  --sds-sp-2:   2px;
  --sds-sp-4:   4px;
  --sds-sp-6:   6px;
  --sds-sp-8:   8px;
  --sds-sp-10:  10px;
  --sds-sp-12:  12px;
  --sds-sp-14:  14px;
  --sds-sp-16:  16px;
  --sds-sp-20:  20px;
  --sds-sp-24:  24px;
  --sds-sp-28:  28px;
  --sds-sp-32:  32px;
  --sds-sp-36:  36px;
  --sds-sp-40:  40px;
  --sds-sp-48:  48px;

  /* ====================================================================
     RADII
     ==================================================================== */
  --sds-r-0:    0px;
  --sds-r-2:    2px;
  --sds-r-4:    4px;
  --sds-r-6:    6px;
  --sds-r-8:    8px;    /* default button, input */
  --sds-r-12:   12px;   /* card */
  --sds-r-16:   16px;   /* large card / dialog */
  --sds-r-20:   20px;
  --sds-r-24:   24px;
  --sds-r-36:   36px;
  --sds-r-full: 999px;  /* pill, avatar */

  /* ====================================================================
     BORDER WEIGHTS
     ==================================================================== */
  --sds-bw-1: 1px;
  --sds-bw-2: 2px;
  --sds-bw-3: 3px;
  --sds-bw-4: 4px;

  /* ====================================================================
     SHADOWS
     ==================================================================== */
  --sds-sh-1: 0 1px 2px rgba(15, 24, 41, 0.06), 0 1px 2px rgba(15, 24, 41, 0.04);
  --sds-sh-2: 0 2px 6px rgba(15, 24, 41, 0.08), 0 2px 4px rgba(15, 24, 41, 0.04);
  --sds-sh-3: 0 8px 24px rgba(15, 24, 41, 0.12), 0 4px 8px rgba(15, 24, 41, 0.06);
  --sds-sh-theme: 0 6px 20px rgba(26, 78, 219, 0.18);    /* colored shadow — rebinds per theme */

  /* ====================================================================
     MOTION
     ==================================================================== */
  --sds-dur-fast:   120ms;
  --sds-dur-base:   200ms;
  --sds-dur-slow:   320ms;
  --sds-ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --sds-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* ====================================================================
     LAYERS (z-index)
     ==================================================================== */
  --sds-z-nav:      100;
  --sds-z-dropdown: 800;
  --sds-z-toast:    900;
  --sds-z-modal:    1000;
}

/* =======================================================================
   TYPE UTILITY CLASSES
   Use these over raw px values wherever possible.
   ======================================================================= */
.sds-display {
  font: var(--sds-fw-bold) var(--sds-fs-48)/var(--sds-lh-tight) var(--sds-font-family);
  letter-spacing: var(--sds-ls-tight);
}
.sds-display-sm {
  font: var(--sds-fw-bold) var(--sds-fs-40)/var(--sds-lh-tight) var(--sds-font-family);
  letter-spacing: var(--sds-ls-tight);
}
.sds-headline {
  font: var(--sds-fw-bold) var(--sds-fs-32)/var(--sds-lh-tight) var(--sds-font-family);
  letter-spacing: var(--sds-ls-tight);
}
.sds-title {
  font: var(--sds-fw-bold) var(--sds-fs-24)/var(--sds-lh-snug) var(--sds-font-family);
}
.sds-title-sm {
  font: var(--sds-fw-medium) var(--sds-fs-20)/var(--sds-lh-snug) var(--sds-font-family);
}
.sds-body {
  font: var(--sds-fw-book) var(--sds-fs-16)/var(--sds-lh-normal) var(--sds-font-family);
}
.sds-body-medium {
  font: var(--sds-fw-medium) var(--sds-fs-16)/var(--sds-lh-normal) var(--sds-font-family);
}
.sds-body-sm {
  font: var(--sds-fw-book) var(--sds-fs-14)/var(--sds-lh-normal) var(--sds-font-family);
}
.sds-body-sm-medium {
  font: var(--sds-fw-medium) var(--sds-fs-14)/var(--sds-lh-normal) var(--sds-font-family);
}
.sds-caption {
  font: var(--sds-fw-book) var(--sds-fs-12)/var(--sds-lh-normal) var(--sds-font-family);
}
.sds-caption-medium {
  font: var(--sds-fw-medium) var(--sds-fs-12)/var(--sds-lh-normal) var(--sds-font-family);
}
.sds-overline {
  font: var(--sds-fw-bold) var(--sds-fs-12)/var(--sds-lh-normal) var(--sds-font-family);
  text-transform: uppercase;
  letter-spacing: var(--sds-ls-caps);
}

/* =======================================================================
   GLOBAL BASELINE
   ======================================================================= */
body {
  font-family: var(--sds-font-family);
  font-size: var(--sds-fs-14);
  line-height: var(--sds-lh-normal);
  color: var(--sds-fg-primary);
  background: var(--sds-bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =======================================================================
   THEMES — apply class to <html> or any scope. Rebinds --sds-custom-*
   and --sds-sh-theme. Add more themes by copying this block.
   ======================================================================= */

/* Amber blue (default for payroll, finance contexts) */
.theme-amber-blue {
  --sds-custom-10: #FFF4DF;
  --sds-custom-20: #FFE4A8;
  --sds-custom-30: #FFCE5A;
  --sds-custom-40: #F5B120;
  --sds-custom-50: #D9900A;
  --sds-custom-60: #B47200;   /* primary */
  --sds-custom-70: #8A5600;
  --sds-custom-80: #5E3A00;
  --sds-custom-90: #3A2400;
  --sds-sh-theme:  0 6px 20px rgba(180, 114, 0, 0.18);
}

/* Coral red */
.theme-coral-red {
  --sds-custom-10: #FFEEEB;
  --sds-custom-20: #FFCEC4;
  --sds-custom-30: #FFA391;
  --sds-custom-40: #FF7A5F;
  --sds-custom-50: #E85A3C;
  --sds-custom-60: #C43E24;
  --sds-custom-70: #982713;
  --sds-custom-80: #6B1807;
  --sds-custom-90: #400C00;
  --sds-sh-theme:  0 6px 20px rgba(196, 62, 36, 0.22);
}

/* Crimson red */
.theme-crimson-red {
  --sds-custom-10: #FEE8EB;
  --sds-custom-20: #FBC0C8;
  --sds-custom-30: #F58B9A;
  --sds-custom-40: #E8576C;
  --sds-custom-50: #CF2A44;
  --sds-custom-60: #A6132C;
  --sds-custom-70: #7A0720;
  --sds-custom-80: #520114;
  --sds-custom-90: #30000B;
  --sds-sh-theme:  0 6px 20px rgba(166, 19, 44, 0.22);
}

/* Aqua teal */
.theme-aqua-teal {
  --sds-custom-10: #E0F5F4;
  --sds-custom-20: #A9E4E1;
  --sds-custom-30: #67CDC8;
  --sds-custom-40: #2CB1AA;
  --sds-custom-50: #0E9590;
  --sds-custom-60: #087872;
  --sds-custom-70: #055C57;
  --sds-custom-80: #02413D;
  --sds-custom-90: #012825;
  --sds-sh-theme:  0 6px 20px rgba(8, 120, 114, 0.22);
}

/* Spring green */
.theme-spring-green {
  --sds-custom-10: #E8F7EE;
  --sds-custom-20: #BEEACE;
  --sds-custom-30: #86D4A8;
  --sds-custom-40: #4FBA82;
  --sds-custom-50: #2A9D60;
  --sds-custom-60: #17834A;
  --sds-custom-70: #0B683A;
  --sds-custom-80: #034E2A;
  --sds-custom-90: #013418;
  --sds-sh-theme:  0 6px 20px rgba(23, 131, 74, 0.22);
}

/* Bloom violet */
.theme-bloom-violet {
  --sds-custom-10: #F2E9FB;
  --sds-custom-20: #DFC8F4;
  --sds-custom-30: #BF9AEA;
  --sds-custom-40: #9D6BDE;
  --sds-custom-50: #7F4AC9;
  --sds-custom-60: #6132A6;
  --sds-custom-70: #451E7C;
  --sds-custom-80: #2C0F55;
  --sds-custom-90: #170533;
  --sds-sh-theme:  0 6px 20px rgba(97, 50, 166, 0.22);
}

/* Charcol (monochrome) */
.theme-charcol {
  --sds-custom-10: var(--sds-charcol-10);
  --sds-custom-20: var(--sds-charcol-20);
  --sds-custom-30: var(--sds-charcol-30);
  --sds-custom-40: var(--sds-charcol-40);
  --sds-custom-50: var(--sds-charcol-50);
  --sds-custom-60: var(--sds-charcol-80);  /* primary */
  --sds-custom-70: var(--sds-charcol-90);
  --sds-custom-80: var(--sds-charcol-100);
  --sds-custom-90: var(--sds-charcol-100);
  --sds-sh-theme:  0 6px 20px rgba(15, 24, 41, 0.2);
}