/* ============================================================
   Simpra Design System (SDS) — Colors & Typography
   Token prefix: --sds-*   |   Base font: Inter 14px
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Belfast Grotesk — licensed brand font (brand/marketing only, not UI) */
@font-face { font-family: 'Belfast Grotesk'; src: url("fonts/BelfastGrotesk_Thin.ttf") format('truetype');         font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Belfast Grotesk'; src: url("fonts/BelfastGrotesk_Thin_Oblique.ttf") format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Belfast Grotesk'; src: url("fonts/BelfastGrotesk_Extra_Light.ttf") format('truetype');         font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Belfast Grotesk'; src: url("fonts/BelfastGrotesk_Extra_Light_Oblique.ttf") format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Belfast Grotesk'; src: url("fonts/BelfastGrotesk_Light.ttf") format('truetype');         font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Belfast Grotesk'; src: url("fonts/BelfastGrotesk_Light_Oblique.ttf") format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Belfast Grotesk'; src: url("fonts/BelfastGrotesk_Regular.ttf") format('truetype');         font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Belfast Grotesk'; src: url("fonts/BelfastGrotesk_Regular_Oblique.ttf") format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Belfast Grotesk'; src: url("fonts/BelfastGrotesk_Medium.ttf") format('truetype');         font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Belfast Grotesk'; src: url("fonts/BelfastGrotesk_Medium_Oblique.ttf") format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Belfast Grotesk'; src: url("fonts/BelfastGrotesk_Semi_Bold.ttf") format('truetype');         font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Belfast Grotesk'; src: url("fonts/BelfastGrotesk_Semi_Bold_Oblique.ttf") format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Belfast Grotesk'; src: url("fonts/BelfastGrotesk_Bold.ttf") format('truetype');         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Belfast Grotesk'; src: url("fonts/BelfastGrotesk_Bold_Oblique.ttf") format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Belfast Grotesk'; src: url("fonts/BelfastGrotesk_Extra_Bold.ttf") format('truetype');         font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Belfast Grotesk'; src: url("fonts/BelfastGrotesk_Extra_Bold_Oblique.ttf") format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Belfast Grotesk'; src: url("fonts/BelfastGrotesk_Black.ttf") format('truetype');         font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Belfast Grotesk'; src: url("fonts/BelfastGrotesk_Black_Oblique.ttf") format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ---------- FOUNDATION: SIMPRA YELLOW (primary brand) ---------- */
  --sds-simpra-50:  #FFFCE6;
  --sds-simpra-100: #FFF8CC;
  --sds-simpra-200: #FFF199;
  --sds-simpra-300: #FEEB66;
  --sds-simpra-400: #FEE433;
  --sds-simpra-500: #FEDD00;
  --sds-simpra-600: #CBB100;
  --sds-simpra-700: #988500;
  --sds-simpra-800: #665800;
  --sds-simpra-900: #4D4200;
  --sds-simpra-950: #332C00;

  /* ---------- FOUNDATION: INVENTORY GREEN ---------- */
  --sds-inventory-50:  #EAFFF5;
  --sds-inventory-100: #CDFFE5;
  --sds-inventory-200: #9FFBD1;
  --sds-inventory-300: #60F5BA;
  --sds-inventory-400: #21E69E;
  --sds-inventory-500: #00BB7E;
  --sds-inventory-600: #009B6B;
  --sds-inventory-700: #00704C;
  --sds-inventory-800: #036247;
  --sds-inventory-900: #03513C;
  --sds-inventory-950: #012D23;

  /* ---------- FOUNDATION: NEUTRAL (25 → 950) ---------- */
  --sds-neutral-25:  #FFFFFF;
  --sds-neutral-50:  #F9FAFB;
  --sds-neutral-100: #F3F4F6;
  --sds-neutral-200: #E5E8EB;
  --sds-neutral-300: #D1D6DB;
  --sds-neutral-400: #9CA5AF;
  --sds-neutral-500: #6B7580;
  --sds-neutral-600: #4B5863;
  --sds-neutral-700: #374451;
  --sds-neutral-800: #1F2C37;
  --sds-neutral-900: #111B27;
  --sds-neutral-950: #030912;

  /* ---------- FOUNDATION: ACCENT / INFORMING SCALES ---------- */
  --sds-yellow-50:  #FEFDE8; --sds-yellow-100: #FEFBC3; --sds-yellow-200: #FEF48A;
  --sds-yellow-300: #FDE547; --sds-yellow-400: #FAD415; --sds-yellow-500: #EAB908;
  --sds-yellow-600: #CA9204; --sds-yellow-700: #A16607;

  --sds-red-50:  #FEF3F2; --sds-red-100: #FEE5E2; --sds-red-200: #FECECA;
  --sds-red-300: #FCAEA5; --sds-red-400: #F87F71; --sds-red-500: #EF5544;
  --sds-red-600: #DC3826; --sds-red-700: #B92C1C;

  --sds-green-50:  #F0FDF6; --sds-green-100: #DCFCEB; --sds-green-200: #BBF7D6;
  --sds-green-300: #86EFB7; --sds-green-400: #4ADE8F; --sds-green-500: #22C56E;
  --sds-green-600: #16A358; --sds-green-700: #158047;

  --sds-orange-50:  #FFF8ED; --sds-orange-100: #FFEFD5; --sds-orange-200: #FEDBAA;
  --sds-orange-300: #FDC274; --sds-orange-400: #FB9B3C; --sds-orange-500: #F98016;
  --sds-orange-600: #EA650C; --sds-orange-700: #C2490C;

  --sds-blue-50:  #EFF6FF; --sds-blue-100: #DBEAFE; --sds-blue-200: #BFDAFE;
  --sds-blue-300: #93C3FD; --sds-blue-400: #60A3FA; --sds-blue-500: #3B80F6;
  --sds-blue-600: #2560EB; --sds-blue-700: #1D4CD8;

  /* ---------- SEMANTIC: BRAND (choose one per page) ---------- */
  --sds-color-brand-simpra-500:    var(--sds-simpra-500);    /* #FEDD00 */
  --sds-color-brand-inventory-500: var(--sds-inventory-500); /* #00BB7E */
  --sds-color-accent-orange-500:   var(--sds-orange-500);    /* #F98016 — Simphony */

  /* Product accent (overridden by [data-product]) defaults to Simpra Yellow */
  --sds-color-brand-500:  var(--sds-simpra-500);
  --sds-color-brand-600:  var(--sds-simpra-600);
  --sds-color-brand-100:  var(--sds-simpra-100);
  --sds-color-brand-50:   var(--sds-simpra-50);
  --sds-color-brand-fg:   #374451; /* text-on-brand (dark on yellow) */

  /* ---------- SEMANTIC: SURFACE ---------- */
  --sds-color-surface-neutral-25:  var(--sds-neutral-25);
  --sds-color-surface-neutral-50:  var(--sds-neutral-50);
  --sds-color-surface-neutral-100: var(--sds-neutral-100);
  --sds-color-surface-neutral-200: var(--sds-neutral-200);
  --sds-color-surface-neutral-300: var(--sds-neutral-300);
  --sds-color-surface-simpra-500:    var(--sds-simpra-500);
  --sds-color-surface-inventory-500: var(--sds-inventory-500);

  /* ---------- SEMANTIC: TEXT ---------- */
  --sds-color-text-neutral-25:  var(--sds-neutral-25);
  --sds-color-text-neutral-50:  var(--sds-neutral-50);
  --sds-color-text-neutral-100: var(--sds-neutral-100);
  --sds-color-text-neutral-200: var(--sds-neutral-200);
  --sds-color-text-neutral-300: var(--sds-neutral-300);
  --sds-color-text-neutral-400: var(--sds-neutral-400);
  --sds-color-text-neutral-500: var(--sds-neutral-500);
  --sds-color-text-neutral-600: var(--sds-neutral-600);
  --sds-color-text-neutral-700: var(--sds-neutral-700);
  --sds-color-text-neutral-800: var(--sds-neutral-800);
  --sds-color-text-neutral-900: var(--sds-neutral-900);

  /* ---------- SEMANTIC: INFORMING ---------- */
  --sds-color-warning-yellow:     var(--sds-yellow-500);
  --sds-color-success-green:      var(--sds-green-500);
  --sds-color-error-red:          var(--sds-red-500);
  --sds-color-information-blue:   var(--sds-blue-500);
  --sds-color-annotation-grey:    var(--sds-neutral-500);

  /* ---------- SPACING (4px base) ---------- */
  --sds-space-1: 4px;   --sds-space-2: 8px;   --sds-space-3: 12px;
  --sds-space-4: 16px;  --sds-space-5: 20px;  --sds-space-6: 24px;
  --sds-space-8: 32px;  --sds-space-10: 40px; --sds-space-12: 48px;
  --sds-space-16: 64px; --sds-space-20: 80px; --sds-space-24: 96px;

  /* ---------- RADIUS ---------- */
  --sds-radius-interactive: 6px; /* buttons, inputs, badges, tabs */
  --sds-radius-checkbox:    4px;
  --sds-radius-card:        12px; /* cards, modals */
  --sds-radius-toggle:      10px; /* toggle track */
  --sds-radius-progress:    4px;
  --sds-radius-circle:      9999px;

  /* ---------- SHADOWS (4-tier) ---------- */
  --sds-shadow-sm: 0 1px 2px rgba(64, 70, 77, 0.08);
  --sds-shadow-md:
    0 2px 4px rgba(64, 70, 77, 0.04),
    0 3px 6px rgba(64, 70, 77, 0.04),
    0 6px 10px rgba(64, 70, 77, 0.04);
  --sds-shadow-lg:
    0 16px 30px -10px rgba(0, 0, 0, 0.10),
    0 2px 20px -4px rgba(2, 16, 23, 0.08),
    0 1px 4px -2px rgba(2, 16, 23, 0.05);
  --sds-shadow-xl: -4px 4px 16px rgba(0, 0, 0, 0.10);

  /* ---------- Z-INDEX ---------- */
  --sds-z-base: 0; --sds-z-sticky: 10; --sds-z-sidebar: 20;
  --sds-z-dropdown: 30; --sds-z-overlay: 40; --sds-z-modal: 50;
  --sds-z-toast: 60; --sds-z-tooltip: 70;

  /* ---------- MOTION ---------- */
  --sds-motion-instant: 0ms;
  --sds-motion-fast:     100ms;
  --sds-motion-default:  200ms;
  --sds-motion-slow:     300ms;
  --sds-motion-deliberate: 500ms;
  --sds-ease-out: ease-out;
  --sds-ease-in-out: ease-in-out;
  --sds-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- TYPOGRAPHY ---------- */
  --sds-font-ui:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --sds-font-brand: 'Belfast Grotesk', 'Inter', sans-serif;

  /* Modal overlay */
  --sds-color-overlay: rgba(17, 27, 39, 0.5);
}

/* ============================================================
   PRODUCT ACCENT — set on <html data-product="..."> or <body>
   ============================================================ */
[data-product="inventory"], [data-product="vendor"] {
  --sds-color-brand-500: var(--sds-inventory-500);
  --sds-color-brand-600: var(--sds-inventory-600);
  --sds-color-brand-100: var(--sds-inventory-100);
  --sds-color-brand-50:  var(--sds-inventory-50);
  --sds-color-brand-fg:  #FFFFFF;
}
[data-product="simpra"], [data-product="pos"], [data-product="simphony-bo"],
[data-product="pms"], [data-product="barboon"] {
  --sds-color-brand-500: var(--sds-simpra-500);
  --sds-color-brand-600: var(--sds-simpra-600);
  --sds-color-brand-100: var(--sds-simpra-100);
  --sds-color-brand-50:  var(--sds-simpra-50);
  --sds-color-brand-fg:  #374451; /* dark text on yellow for AA */
}
[data-product="simphony"] {
  --sds-color-brand-500: var(--sds-orange-500);
  --sds-color-brand-600: var(--sds-orange-600);
  --sds-color-brand-100: var(--sds-orange-100);
  --sds-color-brand-50:  var(--sds-orange-50);
  --sds-color-brand-fg:  #FFFFFF;
}

/* ============================================================
   DARK MODE — invert neutrals; brand stays at 500; informing +1 step
   ============================================================ */
[data-theme="dark"] {
  --sds-color-surface-neutral-25:  var(--sds-neutral-900);
  --sds-color-surface-neutral-50:  var(--sds-neutral-800);
  --sds-color-surface-neutral-100: #283845;
  --sds-color-surface-neutral-200: var(--sds-neutral-700);
  --sds-color-surface-neutral-300: var(--sds-neutral-600);

  --sds-color-text-neutral-700: var(--sds-neutral-100);
  --sds-color-text-neutral-900: var(--sds-neutral-25);
  --sds-color-text-neutral-500: var(--sds-neutral-300);

  --sds-color-warning-yellow:   var(--sds-yellow-300);
  --sds-color-success-green:    var(--sds-green-400);
  --sds-color-error-red:        var(--sds-red-400);
  --sds-color-information-blue: var(--sds-blue-400);
}

/* ============================================================
   TYPE SCALE — utility classes match the kit tokens
   ============================================================ */

/* Display */
.sds-display-2xl { font: 400 60px/68px var(--sds-font-ui); letter-spacing: -0.01px; }
.sds-display-xl  { font: 400 54px/60px var(--sds-font-ui); letter-spacing: -0.01px; }
.sds-display-lg  { font: 400 48px/52px var(--sds-font-ui); letter-spacing: -0.01px; }
.sds-display-md  { font: 400 42px/48px var(--sds-font-ui); letter-spacing: -0.01px; }
.sds-display-sm  { font: 400 36px/44px var(--sds-font-ui); }
.sds-display-xs  { font: 400 32px/40px var(--sds-font-ui); }
.sds-display-2xs { font: 400 28px/36px var(--sds-font-ui); }
.sds-display-3xs { font: 400 24px/32px var(--sds-font-ui); letter-spacing: 0.01px; }

/* Body */
.sds-body-xl    { font: 400 20px/28px var(--sds-font-ui); letter-spacing: 0.02px; }
.sds-body-lg    { font: 400 18px/24px var(--sds-font-ui); letter-spacing: 0.02px; }
.sds-body-md    { font: 400 16px/24px var(--sds-font-ui); letter-spacing: 0.03px; }
.sds-body-sm    { font: 400 14px/20px var(--sds-font-ui); letter-spacing: 0.04px; } /* base */
.sds-body-xs    { font: 400 12px/16px var(--sds-font-ui); letter-spacing: 0.05px; }
.sds-body-macro { font: 400 10px/16px var(--sds-font-ui); letter-spacing: 0.06px; }

/* Weight modifiers */
.sds-w-light    { font-weight: 300; }
.sds-w-regular  { font-weight: 400; }
.sds-w-medium   { font-weight: 500; }
.sds-w-semibold { font-weight: 600; }
.sds-w-bold     { font-weight: 700; }

/* Semantic element defaults */
html, body { font-family: var(--sds-font-ui); font-size: 14px; line-height: 20px;
  color: var(--sds-color-text-neutral-700); background: var(--sds-color-surface-neutral-25);
  -webkit-font-smoothing: antialiased; }
h1 { font: 600 42px/48px var(--sds-font-ui); color: var(--sds-color-text-neutral-900); margin: 0; }
h2 { font: 600 32px/40px var(--sds-font-ui); color: var(--sds-color-text-neutral-900); margin: 0; }
h3 { font: 600 24px/32px var(--sds-font-ui); color: var(--sds-color-text-neutral-900); margin: 0; }
h4 { font: 600 20px/28px var(--sds-font-ui); color: var(--sds-color-text-neutral-700); margin: 0; }
h5 { font: 600 16px/24px var(--sds-font-ui); color: var(--sds-color-text-neutral-700); margin: 0; }
h6 { font: 600 14px/20px var(--sds-font-ui); color: var(--sds-color-text-neutral-700); margin: 0; }
p  { font: 400 14px/20px var(--sds-font-ui); color: var(--sds-color-text-neutral-600); margin: 0; }
small { font: 400 12px/16px var(--sds-font-ui); color: var(--sds-color-text-neutral-500); }
code { font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
  background: var(--sds-color-surface-neutral-100); padding: 1px 6px;
  border-radius: var(--sds-radius-interactive); color: var(--sds-color-text-neutral-800); }