/* Planify — self-hosted webfonts (IBM Plex Sans + IBM Plex Mono).
   woff2 files live in ./fonts/ (or ../fonts/, ../../fonts/ depending on depth).
   This file assumes it sits at the project root next to /fonts.
   Import BEFORE colors_and_type.css. Replaces the Google Fonts <link>. */

/* IBM Plex Sans */
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/ibm-plex-sans-300.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/ibm-plex-sans-700.woff2') format('woff2'); }

/* Single-typeface system — IBM Plex Mono is no longer used (data columns use
   IBM Plex Sans with tabular figures). Mono @font-face intentionally removed. */

/* ============================================================
   Planify — Colors & Type tokens
   Manufacturing planning & scheduling. Source of truth derived
   from the Planify Design System v1.0.0 spec + logo.
   Fonts: IBM Plex Sans (UI) + IBM Plex Mono (IDs / data).
   Self-hosted — import fonts.css (which @font-faces the woff2 files in /fonts)
   BEFORE this file. (Legacy Google Fonts <link> also works if you prefer CDN.)
   ============================================================ */

:root {
  /* ---- Primary (logo blue→cyan gradient) ---- */
  --p700: #1668B5;   /* pressed / deep emphasis */
  --p600: #1E7FD4;   /* DEFAULT action — buttons, links, active controls */
  --p500: #2C92DD;   /* hover fills, secondary emphasis */
  --p400: #5FB1E8;   /* charts, accents, selected-row tint */
  --p300: #9BCFF1;   /* light fills, hover backgrounds */
  --cyan: #25B5DD;   /* gradient end, automation / AI cues, checkmark */

  /* ---- Neutral (navy-tinted, anchored on the ink) ---- */
  --n900: #1A2740;   /* darkest surfaces, high-contrast text */
  --n800: #21304F;   /* INK — primary text, headings, brand ink */
  --n700: #3C4A66;   /* body text, secondary headings */
  --n500: #6B7A99;   /* secondary / muted text, icons */
  --n400: #8B98B3;   /* placeholder text */
  --n300: #AEB8CC;   /* disabled text, subtle icons */
  --n200: #D7DEEA;   /* borders, dividers */
  --n100: #E9EDF4;   /* track fills, hairlines, hover rows */
  --n50:  #F4F6FA;   /* page background, inset surfaces */
  --white: #FFFFFF;

  /* ---- Semantic (schedule states) ---- */
  --success: #16A34A; /* on time / complete / on-plan */
  --warning: #F59E0B; /* at risk / on hold / slipping soon */
  --error:   #DC2626; /* late / machine down / conflict */
  --info:    #2493CA; /* neutral notices, re-optimization */
  --auto:    #7C4AED; /* auto-scheduled / AI-assisted */
  --teal:    #0E7490; /* in progress (work-order status) */

  /* soft tints for badge / alert backgrounds */
  --success-bg: #E7F6EC;
  --warning-bg: #FEF3E2;
  --error-bg:   #FCEBEB;
  --info-bg:    #E4F1F8;
  --auto-bg:    #F0EAFD;
  --p-bg:       #EEF6FD;

  /* ---- Brand gradient ---- */
  --grad: linear-gradient(100deg, var(--p700), var(--p500) 55%, var(--cyan));
  --grad-soft: linear-gradient(100deg, #EAF3FB, #E6F4FA);

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

  /* ---- Radius ---- */
  --r-xs: 2px; --r-sm: 4px; --r: 8px; --r-md: 12px;
  --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; --r-full: 999px;

  /* ---- Borders ---- */
  --line: 1px solid var(--n200);
  --line-strong: 1.5px solid var(--n200);

  /* ---- Elevation (cool, navy-tinted shadows — kept subtle for a dense tool) ---- */
  --sh-1: 0 1px 2px rgba(26, 39, 64, 0.06);
  --sh-2: 0 2px 6px rgba(26, 39, 64, 0.08);
  --sh-3: 0 6px 16px rgba(26, 39, 64, 0.10);
  --sh-pop: 0 12px 32px rgba(26, 39, 64, 0.16);
  --focus-ring: 0 0 0 3px rgba(30, 127, 212, 0.14);

  /* ---- Type families ---- */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Single-typeface system: IDs / times / quantities use IBM Plex Sans with
     TABULAR figures (font-variant-numeric: tabular-nums) so digits still align
     in dense grids. --font-mono is kept as an alias of --font-sans so existing
     references don't break. */
  --font-mono: var(--font-sans);

  /* ---- Type scale (size / line-height / weight) ---- */
  --h1-size: 32px;  --h1-lh: 40px;  --h1-wt: 700;
  --h2-size: 24px;  --h2-lh: 32px;  --h2-wt: 600;
  --h3-size: 20px;  --h3-lh: 28px;  --h3-wt: 600;
  --h4-size: 16px;  --h4-lh: 24px;  --h4-wt: 600;
  --body-lg-size: 16px; --body-lg-lh: 24px;
  --body-size: 14px;    --body-lh: 20px;
  --small-size: 12px;   --small-lh: 16px;
  --code-size: 13px;    --code-lh: 20px;  --code-wt: 500;
  /* dense grid header label */
  --label-size: 10px;   --label-ls: 0.05em;
}

/* ============================================================
   Semantic element styles — apply with the .planify scope or
   on :root in a kit. Tabular figures keep schedule columns aligned.
   ============================================================ */

.planify, .planify-type {
  font-family: var(--font-sans);
  color: var(--n800);
  font-feature-settings: 'tnum' 1, 'lnum' 1; /* tabular, lining figures */
  -webkit-font-smoothing: antialiased;
}

.planify h1, .ds-h1 { font-size: var(--h1-size); line-height: var(--h1-lh); font-weight: var(--h1-wt); color: var(--n800); margin: 0; letter-spacing: -0.01em; }
.planify h2, .ds-h2 { font-size: var(--h2-size); line-height: var(--h2-lh); font-weight: var(--h2-wt); color: var(--n800); margin: 0; }
.planify h3, .ds-h3 { font-size: var(--h3-size); line-height: var(--h3-lh); font-weight: var(--h3-wt); color: var(--n800); margin: 0; }
.planify h4, .ds-h4 { font-size: var(--h4-size); line-height: var(--h4-lh); font-weight: var(--h4-wt); color: var(--n800); margin: 0; }
.ds-body-lg { font-size: var(--body-lg-size); line-height: var(--body-lg-lh); font-weight: 400; color: var(--n700); }
.ds-body    { font-size: var(--body-size); line-height: var(--body-lh); font-weight: 400; color: var(--n700); }
.ds-small   { font-size: var(--small-size); line-height: var(--small-lh); font-weight: 400; color: var(--n500); }
.ds-code, code.ds-code { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: var(--code-size); line-height: var(--code-lh); font-weight: var(--code-wt); color: var(--n800); }
.ds-label   { font-size: var(--label-size); line-height: 1.4; font-weight: 600; letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--n500); }

/* Tabular-figure utility — apply to numeric/ID/time/quantity cells so digits
   align in columns. (Replaces the old monospace treatment.) */
.tnum, .mono { font-variant-numeric: tabular-nums; }


/* ---- Planify site base ---- */
html{scroll-behavior:smooth}
body{margin:0;background:#fff;font-family:'IBM Plex Sans',system-ui,sans-serif;color:var(--n700);font-feature-settings:'tnum' 1,'lnum' 1;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:var(--p600);text-decoration:none}
a:hover{color:var(--p700)}
h1,h2,h3{margin:0;color:var(--n800);letter-spacing:-.015em}
img{display:block}
.tnum{font-variant-numeric:tabular-nums}
.wrap{max-width:1140px;margin:0 auto}
.navlink{font:500 14.5px/1 'IBM Plex Sans',sans-serif;color:var(--n700)}
.navlink:hover{color:var(--p600)}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;scroll-margin-top:88px}
.fld{width:100%;border:1.5px solid var(--n200);border-radius:8px;padding:11px 13px;font:400 14.5px/1.4 'IBM Plex Sans',sans-serif;color:var(--n800);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
.fld::placeholder{color:var(--n400)}
.fld:focus{border-color:var(--p600);box-shadow:0 0 0 3px rgba(30,127,212,.14)}
.lbl{display:block;font:600 12.5px/1 'IBM Plex Sans',sans-serif;color:var(--n800);margin-bottom:7px}
@media(max-width:820px){.feat{grid-template-columns:1fr}}

/* ---- hover states ---- */
.hv0:hover{background:var(--p700) !important}
.hv1:hover{background:var(--n50) !important}
.hv2:hover{background:var(--p500) !important}