/* InventoryBase Design System — colors & type
 * Sources:
 *   - InventoryBase Brand Guidelines 2019 (rev. June 2021) — official brand colors & type
 *   - resources/css/tailwind.css from the production app — semantic tokens
 * Brand: IB Blue #40c8f2, IB Green #7ac244 (primary accent per user),
 *        IB Grey #b7b7b7, IB Dark Blue #303c46, IB White #ffffff.
 */

/* ────── Webfonts (Proxima Nova — licensed) ────── */
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-SemiboldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-Extrabold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-ExtraboldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ────── Brand colors (from official guidelines) ────── */
  --ib-blue:      #40C8F2;     /* IB Blue — hero color */
  --ib-green:     #7AC244;     /* IB Green — primary accent (user direction) */
  --ib-grey:      #B7B7B7;     /* IB Grey — supporting */
  --ib-dark-blue: #303C46;     /* IB Dark Blue — secondary hero */
  --ib-white:     #FFFFFF;

  /* Aliases retained for back-compat with existing components */
  --logo-blue:  var(--ib-blue);
  --logo-green: var(--ib-green);

  /* ────── Grey scale (foundation) ────── */
  --grey-100: #363E48;         /* primary text */
  --grey-80:  #4A515A;
  --grey-60:  #656F7D;         /* secondary text / placeholders */
  --grey-40:  #A3AAB6;         /* disabled text */
  --grey-30:  #D2D5DB;         /* heavy borders / dividers */
  --grey-20:  #E8EAED;         /* default borders */
  --grey-10:  #F0F1F3;
  --grey-5:   #F9F9F9;         /* page background */
  --grey-0:   #FFFFFF;

  /* ────── Primary (deep green, used in product) ────── */
  --primary:           #1A6725;
  --primary-dark:      #0D3413; /* color-mix black 50% */
  --primary-extradark: #0A290F;
  --primary-light:     #C6D9C9;
  --primary-extralight:#E8F0EA;

  /* ────── Success / Destructive / Warning / Workstreams ────── */
  --success:           #1A6725;
  --success-dark:      #17561E;
  --success-light:     #E6F0EA;

  --destructive:       #9C323B;
  --destructive-dark:  #71242B;
  --destructive-light: #F4DEE0;

  --warning:           #FFCB6B;
  --warning-dark:      #FFAE14;
  --warning-dark-text: #4A3203;
  --warning-light:     #FFEFD2;

  --workstreams:       #7132A0;
  --workstreams-dark:  #552579;
  --workstreams-light: #F7D7FF;

  --focus:             #FFBF47;

  /* ────── Blue (links + info) ────── */
  --blue-100: #12156C;
  --blue-80:  #3552C6;
  --blue-40:  #C4CFFF;
  --blue-20:  #EBECFF;

  /* ────── Functional tokens ────── */
  --color-text:           var(--grey-100);
  --color-text-secondary: var(--grey-60);
  --color-text-disabled:  var(--grey-40);
  --color-text-inverse:   var(--grey-0);

  --color-bg:        var(--grey-0);
  --color-page:      var(--grey-5);
  --color-panel:     var(--grey-0);
  --color-card:      var(--grey-0);
  --color-card-darkened: var(--grey-5);

  --color-border:        var(--grey-20);
  --color-border-strong: var(--grey-30);
  --color-divider:       var(--grey-20);

  --color-link: var(--blue-80);

  /* ────── Type ────── */
  --font-sans:  "Proxima Nova", "proxima-nova", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  --font-serif: Georgia, Times, "Times New Roman", serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (px shown for clarity, expressed as rems matching prod) */
  --text-xs:   0.625rem; /* 10 */
  --text-sm:   0.75rem;  /* 12 */
  --text-base: 0.875rem; /* 14  ← body default */
  --text-lg:   1rem;     /* 16 */
  --text-xl:   1.125rem; /* 18 */
  --text-2xl:  1.25rem;  /* 20 */
  --text-3xl:  1.75rem;  /* 28 */

  --text-h1: 2.5rem;     /* 40 */
  --text-h2: 2rem;       /* 32 */
  --text-h3: 1.5rem;     /* 24 */
  --text-h4: 1.375rem;   /* 22 */
  --text-h5: 1.25rem;    /* 20 */
  --text-h6: 1.125rem;   /* 18 */

  --lh-h1: 3.25rem;
  --lh-h2: 2.5rem;
  --lh-h3: 2rem;
  --lh-h4: 2rem;
  --lh-h5: 1.75rem;
  --lh-h6: 1.625rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ────── Radii ────── */
  --radius-sm: 4px;
  --radius:    8px;        /* default control radius */
  --radius-md: 12px;
  --radius-lg: 20px;       /* large cards, panels */
  --radius-xl: 32px;       /* hero panels (figma) */
  --radius-full: 9999px;

  /* ────── Shadows (lifted from tailwind tokens) ────── */
  --shadow-card:     0px 2px 6px 0px rgba(0,0,0,0.04);
  --shadow-dropdown: 0px 2px 6px 0px rgba(0,0,0,0.04), 0px 4px 15px 0px rgba(0,0,0,0.06);
  --shadow-tooltip:  0px 2px 6px 0px rgba(0,0,0,0.04), 0px 4px 15px 0px rgba(0,0,0,0.06);
  --shadow-segment:  0px 2px 5px 0px rgba(0,0,0,0.09), 0px 0px 2px 0px rgba(0,0,0,0.12);
  --shadow-focus:    0 0 0 3px var(--primary-extralight);

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

  /* ────── Motion ────── */
  --easing: cubic-bezier(0.3, 0.6, 0, 1);
  --dur-fast: 150ms;
  --dur:      250ms;
  --dur-slow: 400ms;

  --content-max-width: 1600px;
}

/* ────── Semantic element styles ────── */

html, body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-page);
  font-size: var(--text-base);
  line-height: 1.25rem;
  -webkit-font-smoothing: antialiased;
}

h1, .h1 { font-size: var(--text-h1); line-height: var(--lh-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; color: var(--color-text); margin: 0; }
h2, .h2 { font-size: var(--text-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--color-text); margin: 0; }
h3, .h3 { font-size: var(--text-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); color: var(--color-text); margin: 0; }
h4, .h4 { font-size: var(--text-h4); line-height: var(--lh-h4); font-weight: var(--fw-semibold); color: var(--color-text); margin: 0; }
h5, .h5 { font-size: var(--text-h5); line-height: var(--lh-h5); font-weight: var(--fw-semibold); color: var(--color-text); margin: 0; }
h6, .h6 { font-size: var(--text-h6); line-height: var(--lh-h6); font-weight: var(--fw-semibold); color: var(--color-text); margin: 0; }

p { margin: 0 0 var(--space-3); color: var(--color-text); }

.text-secondary { color: var(--color-text-secondary); }
.text-disabled  { color: var(--color-text-disabled); }
.text-inverse   { color: var(--color-text-inverse); }

.caps {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--fw-medium);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

a, .link {
  color: var(--color-link);
  text-decoration: none;
}
a:hover, .link:hover { text-decoration: underline; }

code, pre, .mono { font-family: var(--font-mono); font-size: 0.85em; }

hr { border: 0; border-top: 1px solid var(--color-divider); margin: var(--space-6) 0; }