@charset "UTF-8";
/* ============================================================
   OILOGIX — DESIGN TOKENS
   Source: "design/design_handoff_oilogix_ops/tokens/"
   (fonts, colors, typography, spacing, effects), concatenated in that order.
   The handoff's Google Fonts @import is replaced by the @font-face rules
   below: the fonts are served from /static/fonts (see fonts/README.md)
   because the Content-Security-Policy allows no third-party origin.
   Token names and values are the handoff's; edit them there first.
   ============================================================ */

/* ---- Fonts: Chakra Petch (display), Archivo (sans), Spline Sans Mono (mono) ---- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fonts/archivo-variable-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fonts/archivo-variable-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/chakra-petch-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/chakra-petch-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/chakra-petch-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/chakra-petch-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/chakra-petch-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/chakra-petch-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/chakra-petch-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/chakra-petch-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/static/fonts/spline-sans-mono-variable-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/static/fonts/spline-sans-mono-variable-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   OILOGIX — COLOR TOKENS
   Brand DNA: electric blue on deep navy, with stark white.
   Industrial, Canadian, high-contrast, confident.
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --blue-electric: #034EFF;   /* primary brand blue — the wordmark blue */
  --navy-deep:     #03005B;   /* brand navy — social icon background */
  --white:         #FFFFFF;

  /* ---- Blue ramp (tints/shades of the electric brand blue) ---- */
  --blue-950: #03005B;  /* deepest navy-blue */
  --blue-900: #001A8C;
  --blue-800: #0030C7;
  --blue-700: #034EFF;  /* === brand electric blue === */
  --blue-600: #2C68FF;
  --blue-500: #4F80FF;
  --blue-400: #7C9EFF;
  --blue-300: #A8BFFF;
  --blue-200: #CDDAFF;
  --blue-100: #E6ECFF;
  --blue-50:  #F2F5FF;

  /* ---- Neutral ramp (cool steel grays, faintly blue-tinted) ---- */
  --steel-950: #0A0E1A;
  --steel-900: #14192B;
  --steel-800: #222a40;
  --steel-700: #353f59;
  --steel-600: #4d597a;
  --steel-500: #6b779a;
  --steel-400: #919bb8;
  --steel-300: #b7bfd4;
  --steel-200: #d6dbe7;
  --steel-100: #e9ecf3;
  --steel-50:  #f5f6fa;
  --steel-25:  #fafbfd;

  /* ---- Semantic status ---- */
  --green-600: #0E7C5A;
  --green-500: #16A571;
  --green-100: #DCF5EB;
  --amber-600: #B5780B;
  --amber-500: #E69A14;
  --amber-100: #FBEFD2;
  --red-600:   #C42B2B;
  --red-500:   #E23B3B;
  --red-100:   #FBE0E0;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */

  /* Surfaces */
  --surface-page:      var(--white);
  --surface-subtle:    var(--steel-50);
  --surface-card:      var(--white);
  --surface-sunken:    var(--steel-100);
  --surface-inverse:   var(--navy-deep);
  --surface-brand:     var(--blue-700);

  /* Text */
  --text-strong:    var(--steel-950);
  --text-body:      var(--steel-800);
  --text-muted:     var(--steel-500);
  --text-subtle:    var(--steel-400);
  --text-inverse:   var(--white);
  --text-on-brand:  var(--white);
  --text-brand:     var(--blue-700);
  --text-link:      var(--blue-700);

  /* Borders */
  --border-subtle:  var(--steel-200);
  --border-default: var(--steel-300);
  --border-strong:  var(--steel-500);
  --border-brand:   var(--blue-700);
  --border-inverse: rgba(255, 255, 255, 0.16);

  /* Interactive (brand) */
  --action-brand:        var(--blue-700);
  --action-brand-hover:  var(--blue-800);
  --action-brand-press:  var(--blue-900);
  --action-brand-subtle: var(--blue-50);

  /* Focus */
  --focus-ring: var(--blue-500);

  /* Status semantics */
  --status-success:    var(--green-500);
  --status-success-bg: var(--green-100);
  --status-warning:    var(--amber-500);
  --status-warning-bg: var(--amber-100);
  --status-danger:     var(--red-500);
  --status-danger-bg:  var(--red-100);
  --status-info:       var(--blue-700);
  --status-info-bg:    var(--blue-100);
}

/* ============================================================
   OILOGIX — TYPOGRAPHY TOKENS
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --font-sans:    'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, 'SFMono-Regular', monospace;

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

  /* ---- Type scale (1.250 major-third-ish, tuned) ---- */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;

  /* ---- Line heights ---- */
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-caps:    0.12em;  /* uppercase labels / eyebrows */

  /* ---- Semantic roles ---- */
  --display-font:    var(--font-display);
  --display-weight:  var(--weight-bold);
  --display-tracking: var(--tracking-wide);

  --heading-font:    var(--font-sans);
  --heading-weight:  var(--weight-bold);

  --body-font:       var(--font-sans);
  --body-weight:     var(--weight-regular);

  --eyebrow-font:    var(--font-display);
  --eyebrow-tracking: var(--tracking-caps);
}

/* ============================================================
   OILOGIX — SPACING & SIZING TOKENS
   4px base grid.
   ============================================================ */

:root {
  --space-0:  0;
  --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;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Container widths */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1120px;
  --container-xl:  1320px;

  /* Component sizing */
  --control-height-sm: 32px;
  --control-height-md: 40px;
  --control-height-lg: 48px;
}

/* ============================================================
   OILOGIX — EFFECTS: radii, borders, shadows, chamfers
   The brand is ANGULAR. Corners are crisp; the signature
   motif is the 45° chamfer seen in the wordmark letterforms.
   Radii stay tight — never pill-soft.
   ============================================================ */

:root {
  /* ---- Corner radii (tight, technical) ---- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-pill: 999px;  /* use sparingly — tags / status dots */

  /* ---- Signature chamfer corner (the OILOGIX cut) ----
     Apply as: clip-path: var(--chamfer-md);
     Cuts the top-left & bottom-right corners at 45°. */
  --chamfer-sm: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);   /* @kind other */
  --chamfer-md: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); /* @kind other */
  --chamfer-lg: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); /* @kind other */

  /* ---- Borders ---- */
  --border-width-hair: 1px;
  --border-width-bold: 2px;

  /* ---- Shadows (cool, low-spread, never soft-pillowy) ---- */
  --shadow-xs: 0 1px 2px rgba(10, 14, 26, 0.06);
  --shadow-sm: 0 1px 3px rgba(10, 14, 26, 0.08), 0 1px 2px rgba(10, 14, 26, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 14, 26, 0.10), 0 2px 4px rgba(10, 14, 26, 0.05);
  --shadow-lg: 0 12px 28px rgba(10, 14, 26, 0.14), 0 4px 8px rgba(10, 14, 26, 0.06);
  --shadow-xl: 0 24px 56px rgba(10, 14, 26, 0.18);
  --shadow-brand: 0 8px 24px rgba(3, 78, 255, 0.28);
  --shadow-focus: 0 0 0 3px rgba(79, 128, 255, 0.45);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --duration-fast:   120ms; /* @kind other */
  --duration-normal: 200ms; /* @kind other */
  --duration-slow:   320ms; /* @kind other */
}