/* IBM Plex Sans + Mono — still loaded from Google Fonts CDN (user uploaded Serif files only). */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap&subset=cyrillic,cyrillic-ext,latin,latin-ext');

/* IBM Plex Serif — local variable woff2, supplied by user. Roman + Italic, all subsets. */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/IBM_Plex_Serif_Var-Roman-Latin1.woff2') format('woff2-variations'),
       url('fonts/IBM_Plex_Serif_Var-Roman-Latin1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/IBM_Plex_Serif_Var-Roman-Latin2.woff2') format('woff2-variations'),
       url('fonts/IBM_Plex_Serif_Var-Roman-Latin2.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/IBM_Plex_Serif_Var-Roman-Latin3.woff2') format('woff2-variations'),
       url('fonts/IBM_Plex_Serif_Var-Roman-Latin3.woff2') format('woff2');
  unicode-range: U+0250-02AF, U+0300-036F, U+1AB0-1AFF, U+1DC0-1DFF;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/IBM_Plex_Serif_Var-Roman-Cyrillic.woff2') format('woff2-variations'),
       url('fonts/IBM_Plex_Serif_Var-Roman-Cyrillic.woff2') format('woff2');
  unicode-range: U+0400-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/IBM_Plex_Serif_Var-Roman-Greek.woff2') format('woff2-variations'),
       url('fonts/IBM_Plex_Serif_Var-Roman-Greek.woff2') format('woff2');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/IBM_Plex_Serif_Var-Roman-Pi.woff2') format('woff2-variations'),
       url('fonts/IBM_Plex_Serif_Var-Roman-Pi.woff2') format('woff2');
  unicode-range: U+2070-209F, U+2150-218F, U+2190-21FF, U+2200-22FF, U+2300-23FF, U+25A0-25FF, U+2600-26FF;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/IBM_Plex_Serif_Var-Italic-Latin1.woff2') format('woff2-variations'),
       url('fonts/IBM_Plex_Serif_Var-Italic-Latin1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/IBM_Plex_Serif_Var-Italic-Latin2.woff2') format('woff2-variations'),
       url('fonts/IBM_Plex_Serif_Var-Italic-Latin2.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/IBM_Plex_Serif_Var-Italic-Latin3.woff2') format('woff2-variations'),
       url('fonts/IBM_Plex_Serif_Var-Italic-Latin3.woff2') format('woff2');
  unicode-range: U+0250-02AF, U+0300-036F, U+1AB0-1AFF, U+1DC0-1DFF;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/IBM_Plex_Serif_Var-Italic-Cyrillic.woff2') format('woff2-variations'),
       url('fonts/IBM_Plex_Serif_Var-Italic-Cyrillic.woff2') format('woff2');
  unicode-range: U+0400-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/IBM_Plex_Serif_Var-Italic-Greek.woff2') format('woff2-variations'),
       url('fonts/IBM_Plex_Serif_Var-Italic-Greek.woff2') format('woff2');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/IBM_Plex_Serif_Var-Italic-Pi.woff2') format('woff2-variations'),
       url('fonts/IBM_Plex_Serif_Var-Italic-Pi.woff2') format('woff2');
  unicode-range: U+2070-209F, U+2150-218F, U+2190-21FF, U+2200-22FF, U+2300-23FF, U+25A0-25FF, U+2600-26FF;
}

/* =============================================================================
   Drill Kit Design System — colors_and_type.css
   Domain: oil & gas / drilling operations (нефтегазовое дело, бурение скважин)
   Source of truth: WhiteOligator/drill-kit  src/index.css
   Color space: OKLCH (perceptually uniform).
   Brand: Teal (hue 200°) — instrumentation feel; doesn't fight with safety colors.
   Neutral: cool slate (hue 240°, near-zero chroma).
   Status: amplified saturation — drilling alarms must catch the eye.
   ========================================================================== */

:root {
  /* ===== BRAND — Teal (hue 200°) ===== */
  --color-brand-50:  oklch(0.978 0.014 200);
  --color-brand-100: oklch(0.948 0.030 200);
  --color-brand-200: oklch(0.892 0.060 200);
  --color-brand-300: oklch(0.812 0.095 200);
  --color-brand-400: oklch(0.722 0.125 200);
  --color-brand-500: oklch(0.640 0.140 200);
  --color-brand-600: oklch(0.555 0.140 200);
  --color-brand-700: oklch(0.468 0.123 200);
  --color-brand-800: oklch(0.382 0.097 200);
  --color-brand-900: oklch(0.305 0.071 200);
  --color-brand-950: oklch(0.215 0.050 200);

  /* ===== NEUTRAL — Slate (hue 240°, chroma 0.01) ===== */
  --color-neutral-50:  oklch(0.985 0.003 240);
  --color-neutral-100: oklch(0.965 0.005 240);
  --color-neutral-200: oklch(0.925 0.008 240);
  --color-neutral-300: oklch(0.870 0.010 240);
  --color-neutral-400: oklch(0.730 0.012 240);
  --color-neutral-500: oklch(0.585 0.014 240);
  --color-neutral-600: oklch(0.475 0.014 240);
  --color-neutral-700: oklch(0.385 0.012 240);
  --color-neutral-800: oklch(0.290 0.010 240);
  --color-neutral-900: oklch(0.210 0.008 240);
  --color-neutral-950: oklch(0.135 0.006 240);

  /* ===== SUCCESS — Green (hue 145°), nominal flow / pumps OK ===== */
  --color-success-50:  oklch(0.972 0.020 145);
  --color-success-100: oklch(0.935 0.045 145);
  --color-success-200: oklch(0.870 0.085 145);
  --color-success-300: oklch(0.785 0.130 145);
  --color-success-400: oklch(0.710 0.155 145);
  --color-success-500: oklch(0.625 0.160 145);
  --color-success-600: oklch(0.530 0.150 145);
  --color-success-700: oklch(0.435 0.130 145);
  --color-success-800: oklch(0.350 0.105 145);
  --color-success-900: oklch(0.275 0.080 145);
  --color-success-950: oklch(0.180 0.055 145);

  /* ===== WARNING — Amber (hue 75°), kick alarms / mud loss ===== */
  --color-warning-50:  oklch(0.982 0.025 85);
  --color-warning-100: oklch(0.955 0.060 85);
  --color-warning-200: oklch(0.910 0.110 85);
  --color-warning-300: oklch(0.855 0.150 85);
  --color-warning-400: oklch(0.800 0.165 80);
  --color-warning-500: oklch(0.740 0.165 75);
  --color-warning-600: oklch(0.650 0.150 70);
  --color-warning-700: oklch(0.530 0.125 65);
  --color-warning-800: oklch(0.420 0.100 60);
  --color-warning-900: oklch(0.330 0.075 60);
  --color-warning-950: oklch(0.215 0.050 60);

  /* ===== ERROR — Red (hue 25°), critical alarms / kick / blowout risk ===== */
  --color-error-50:  oklch(0.972 0.020 25);
  --color-error-100: oklch(0.940 0.045 25);
  --color-error-200: oklch(0.880 0.090 25);
  --color-error-300: oklch(0.795 0.140 25);
  --color-error-400: oklch(0.710 0.180 25);
  --color-error-500: oklch(0.610 0.205 25);
  --color-error-600: oklch(0.520 0.200 25);
  --color-error-700: oklch(0.430 0.175 25);
  --color-error-800: oklch(0.350 0.140 25);
  --color-error-900: oklch(0.275 0.105 25);
  --color-error-950: oklch(0.180 0.075 25);

  /* ===== INFO — Blue (hue 250°), tripping / informational ===== */
  --color-info-50:  oklch(0.972 0.020 250);
  --color-info-100: oklch(0.940 0.045 250);
  --color-info-200: oklch(0.880 0.085 250);
  --color-info-300: oklch(0.795 0.115 250);
  --color-info-400: oklch(0.705 0.135 250);
  --color-info-500: oklch(0.605 0.150 250);
  --color-info-600: oklch(0.510 0.155 250);
  --color-info-700: oklch(0.420 0.140 250);
  --color-info-800: oklch(0.340 0.110 250);
  --color-info-900: oklch(0.265 0.085 250);
  --color-info-950: oklch(0.175 0.060 250);

  /* ===== SEMANTIC — Light theme (default) ===== */
  /* Surfaces */
  --bg-app:                 var(--color-neutral-50);
  --bg-container:           #ffffff;
  --bg-elevated:            #ffffff;
  --bg-overlay:             oklch(0 0 0 / 0.40);

  /* Brand interactive */
  --bg-brand:               var(--color-brand-600);
  --bg-brand-hover:         var(--color-brand-700);
  --bg-brand-press:         var(--color-brand-800);
  --bg-brand-disabled:      var(--color-neutral-200);
  --bg-brand-tint:          var(--color-brand-50);
  --bg-brand-tint-hover:    var(--color-brand-100);
  --bg-brand-tint-press:    var(--color-brand-200);

  /* Neutral interactive */
  --bg-neutral:             var(--color-neutral-100);
  --bg-neutral-hover:       var(--color-neutral-200);
  --bg-neutral-press:       var(--color-neutral-300);
  --bg-neutral-disabled:    var(--color-neutral-100);

  /* Status backgrounds */
  --bg-success:             var(--color-success-600);
  --bg-success-tint:        var(--color-success-50);
  --bg-warning:             var(--color-warning-500);
  --bg-warning-tint:        var(--color-warning-50);
  --bg-error:               var(--color-error-600);
  --bg-error-tint:          var(--color-error-50);
  --bg-info:                var(--color-info-600);
  --bg-info-tint:           var(--color-info-50);

  /* Text */
  --text-primary:           var(--color-neutral-900);
  --text-secondary:         var(--color-neutral-700);
  --text-tertiary:          var(--color-neutral-500);
  --text-placeholder:       var(--color-neutral-400);
  --text-disabled:          var(--color-neutral-400);
  --text-brand:             var(--color-brand-700);
  --text-on-brand:          #ffffff;
  --text-success:           var(--color-success-700);
  --text-warning:           var(--color-warning-700);
  --text-error:             var(--color-error-700);
  --text-info:              var(--color-info-700);

  /* Borders */
  --border-default:         var(--color-neutral-200);
  --border-strong:          var(--color-neutral-300);
  --border-focus:           var(--color-brand-500);
  --border-brand:           var(--color-brand-500);
  --border-success:         var(--color-success-500);
  --border-warning:         var(--color-warning-500);
  --border-error:           var(--color-error-500);
  --border-info:            var(--color-info-500);

  /* Inputs — focus colour: dark blue (info-800), border 1px, radius 2px */
  --input-focus-color:      var(--color-info-800);
  --input-border-width:     1px;
  --input-border-radius:    2px;

  /* ===== SPACING (combinezone-aligned aliases, base 4px) ===== */
  --spacing-half-module:    2px;   /* 0.5 * 4 */
  --spacing-module:         4px;   /* base unit */
  --spacing-module-x2:      8px;
  --spacing-module-x3:     12px;
  --spacing-gutter:        16px;
  --spacing-margin:        24px;
  --spacing-section:       32px;

  /* ===== RADIUS ===== */
  --radius-input:           2px;
  --radius-button-sm:       4px;
  --radius-button-md:       6px;
  --radius-card:            8px;   /* Block / Modal / Toast */
  --radius-pill:          9999px;

  /* ===== ELEVATION (oklch alpha-shadows) ===== */
  --shadow-popover:    0 4px 14px oklch(0 0 0 / 0.10), 0 0 0 1px var(--border-default);
  --shadow-modal:      0 20px 50px oklch(0 0 0 / 0.20), 0 8px 16px oklch(0 0 0 / 0.10);
  --shadow-toast:      0 8px 24px oklch(0 0 0 / 0.18), 0 0 0 1px var(--border-default);
  --shadow-drawer-r:   -8px 0 24px oklch(0 0 0 / 0.18);
  --shadow-drawer-l:    8px 0 24px oklch(0 0 0 / 0.18);

  /* ===== TYPOGRAPHY — base ===== */
  /* Stack: IBM Plex Sans + Mono — purpose-built for technical interfaces, full Cyrillic, shared design DNA. */
  --font-sans:     'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --font-serif:    'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-display:  var(--font-sans);

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Type scale (px / line-height) — driven by Tailwind v4 + drill-kit usage */
  --fs-xs:        11px;
  --fs-sm:        12px;
  --fs-md:        14px;
  --fs-base:      14px;
  --fs-lg:        16px;
  --fs-xl:        18px;
  --fs-2xl:       20px;
  --fs-3xl:       24px;
  --fs-4xl:       30px;
  --fs-5xl:       36px;

  --lh-tight:     1.20;
  --lh-snug:      1.35;
  --lh-normal:    1.50;
  --lh-relaxed:   1.65;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;

  /* ===== SEMANTIC TYPOGRAPHY ===== */
  /* Page title (rare in operational UIs; reserved for shells / dashboards) */
  --type-h1-size:        30px;
  --type-h1-weight:      var(--weight-semibold);
  --type-h1-line:        1.20;
  --type-h1-tracking:    var(--tracking-tight);

  --type-h2-size:        24px;
  --type-h2-weight:      var(--weight-semibold);
  --type-h2-line:        1.25;

  --type-h3-size:        20px;
  --type-h3-weight:      var(--weight-semibold);
  --type-h3-line:        1.30;

  --type-h4-size:        16px;
  --type-h4-weight:      var(--weight-semibold);
  --type-h4-line:        1.40;

  /* Body — default operational text (tables, forms, alerts) */
  --type-body-size:      14px;
  --type-body-weight:    var(--weight-regular);
  --type-body-line:      1.50;

  --type-body-sm-size:   12px;
  --type-body-sm-weight: var(--weight-regular);
  --type-body-sm-line:   1.40;

  /* Caption — table headers, form labels, badges */
  --type-caption-size:   11px;
  --type-caption-weight: var(--weight-medium);
  --type-caption-line:   1.30;
  --type-caption-track:  var(--tracking-wide);

  /* Code / value displays — sensor readouts, IDs, well names */
  --type-code-size:      13px;
  --type-code-weight:    var(--weight-regular);
  --type-code-family:    var(--font-mono);

  /* Numeric — large readouts in instrumentation panels */
  --type-numeric-size:   28px;
  --type-numeric-weight: var(--weight-semibold);
  --type-numeric-family: var(--font-mono);
  --type-numeric-feat:   "tnum" 1, "lnum" 1; /* tabular numbers */
}

/* =============================================================================
   DARK THEME — control rooms, night shifts.
   Activate via <html class="dark"> or [data-theme="dark"].
   ========================================================================== */

.dark, [data-theme="dark"] {
  --bg-app:                 var(--color-neutral-950);
  --bg-container:           var(--color-neutral-900);
  --bg-elevated:            var(--color-neutral-800);
  --bg-overlay:             oklch(0 0 0 / 0.65);

  --bg-brand:               var(--color-brand-500);
  --bg-brand-hover:         var(--color-brand-400);
  --bg-brand-press:         var(--color-brand-300);
  --bg-brand-disabled:      var(--color-neutral-800);
  --bg-brand-tint:          oklch(from var(--color-brand-500) l c h / 0.12);
  --bg-brand-tint-hover:    oklch(from var(--color-brand-500) l c h / 0.20);
  --bg-brand-tint-press:    oklch(from var(--color-brand-500) l c h / 0.28);

  --bg-neutral:             var(--color-neutral-800);
  --bg-neutral-hover:       var(--color-neutral-700);
  --bg-neutral-press:       var(--color-neutral-600);
  --bg-neutral-disabled:    var(--color-neutral-800);

  --bg-success-tint:        oklch(from var(--color-success-500) l c h / 0.15);
  --bg-warning-tint:        oklch(from var(--color-warning-500) l c h / 0.15);
  --bg-error-tint:          oklch(from var(--color-error-500) l c h / 0.15);
  --bg-info-tint:           oklch(from var(--color-info-500) l c h / 0.15);

  --text-primary:           var(--color-neutral-50);
  --text-secondary:         var(--color-neutral-300);
  --text-tertiary:          var(--color-neutral-400);
  --text-placeholder:       var(--color-neutral-500);
  --text-disabled:          var(--color-neutral-600);
  --text-brand:             var(--color-brand-300);
  --text-on-brand:          var(--color-neutral-950);
  --text-success:           var(--color-success-300);
  --text-warning:           var(--color-warning-300);
  --text-error:             var(--color-error-300);
  --text-info:              var(--color-info-300);

  --border-default:         var(--color-neutral-800);
  --border-strong:          var(--color-neutral-700);
  --border-focus:           var(--color-brand-400);
  --border-brand:            var(--color-brand-400);
  --border-success:         var(--color-success-400);
  --border-warning:         var(--color-warning-400);
  --border-error:           var(--color-error-400);
  --border-info:            var(--color-info-400);

  --input-focus-color:      var(--color-info-400);
}

/* =============================================================================
   BASE
   ========================================================================== */
html, body {
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font-size: var(--type-h1-size); font-weight: var(--type-h1-weight); line-height: var(--type-h1-line); letter-spacing: var(--type-h1-tracking); }
h2 { font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); line-height: var(--type-h2-line); }
h3 { font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-line); }
h4 { font-size: var(--type-h4-size); font-weight: var(--type-h4-weight); line-height: var(--type-h4-line); }
p  { font-size: var(--type-body-size); line-height: var(--type-body-line); }
small, .caption {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-line);
  letter-spacing: var(--type-caption-track);
}
code, kbd, samp {
  font-family: var(--type-code-family);
  font-size: var(--type-code-size);
}
.numeric, .readout {
  font-family: var(--type-numeric-family);
  font-size: var(--type-numeric-size);
  font-weight: var(--type-numeric-weight);
  font-feature-settings: var(--type-numeric-feat);
}