/* bluecoat IT design system - tokens
   Extracted from the approved homepage design (July 2026).
   Single source of truth for colour, type, spacing, elevation and motion.
   Do not hard-code colours or sizes in page CSS. Use these variables. */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/figtree-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: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/figtree-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-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;
}

/* bluecoat IT - Colour tokens
   Brand source of truth (from CI / logo):
     bright blue  #1F7CF5   deep blue  #004AAD   sky highlight #80B0F0
   Blue-forward, calm and professional. Neutrals are subtly cool. */

:root {
  /* ---- Primary blue scale ---- */
  --blue-50:  #eef5ff;
  --blue-100: #d9e8ff;
  --blue-200: #b3d0ff;
  --blue-300: #80b0f0;   /* logo highlight */
  --blue-400: #4f97f7;
  --blue-500: #1f7cf5;   /* brand bright - PRIMARY */
  --blue-600: #0f63d6;
  --blue-700: #004aad;   /* brand deep */
  --blue-800: #073a82;
  --blue-900: #0b2a4a;   /* deep navy ink */
  --blue-950: #07203a;

  /* ---- Neutral (cool grey) scale ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f6f8fb;
  --neutral-100: #eef1f6;
  --neutral-200: #e1e6ee;
  --neutral-300: #cdd5e0;
  --neutral-400: #9aa6b8;
  --neutral-500: #6b7888;
  --neutral-600: #4d5867;
  --neutral-700: #36404d;
  --neutral-800: #232b35;
  --neutral-900: #141a21;

  /* ---- Semantic status scales ---- */
  --green-50:  #e8f7ee;
  --green-100: #c6ebd3;
  --green-500: #1f9d57;   /* success */
  --green-600: #178049;
  --green-700: #0f6038;

  --amber-50:  #fdf4e3;
  --amber-100: #f8e3bb;
  --amber-500: #e8a23d;   /* warning */
  --amber-600: #c98521;
  --amber-700: #9c6512;

  --red-50:  #fdeceb;
  --red-100: #f8cbc8;
  --red-500: #e0473f;     /* danger */
  --red-600: #c2342d;
  --red-700: #97241f;

  /* =========================================================
     SEMANTIC ALIASES - prefer these in product code
     ========================================================= */

  /* Brand */
  --color-brand:        var(--blue-500);
  --color-brand-deep:   var(--blue-700);
  --color-brand-navy:   var(--blue-900);
  --color-brand-sky:    var(--blue-300);

  /* Text */
  --text-primary:    var(--neutral-900);
  --text-secondary:  var(--neutral-600);
  --text-muted:      var(--neutral-500);
  --text-on-brand:   var(--neutral-0);
  --text-on-dark:    var(--neutral-0);
  --text-link:       var(--blue-600);
  --text-link-hover: var(--blue-700);

  /* Surfaces */
  --surface-page:    var(--neutral-0);
  --surface-subtle:  var(--neutral-50);
  --surface-muted:   var(--neutral-100);
  --surface-card:    var(--neutral-0);
  --surface-inverse: var(--blue-900);
  --surface-brand:   var(--blue-500);
  --surface-brand-soft: var(--blue-50);

  /* Borders & lines */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--blue-500);

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

  /* Status semantic */
  --color-success: var(--green-500);
  --color-warning: var(--amber-500);
  --color-danger:  var(--red-500);
  --color-info:    var(--blue-500);

  /* Signature gradient (logo: bright -> deep) */
  --gradient-brand: linear-gradient(120deg, var(--blue-500) 0%, var(--blue-700) 100%);
  --gradient-brand-deep: linear-gradient(150deg, var(--blue-700) 0%, var(--blue-900) 100%);
  --gradient-sky: linear-gradient(180deg, var(--blue-50) 0%, var(--neutral-0) 100%);
}

/* bluecoat IT - Typography tokens */

:root {
  /* Families */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

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

  /* Type scale (16px base) */
  --text-display: 3.5rem;   /* 56 - hero */
  --text-h1:      2.5rem;   /* 40 */
  --text-h2:      2rem;     /* 32 */
  --text-h3:      1.5rem;   /* 24 */
  --text-h4:      1.25rem;  /* 20 */
  --text-lg:      1.125rem; /* 18 */
  --text-base:    1rem;     /* 16 */
  --text-sm:      0.875rem; /* 14 */
  --text-xs:      0.75rem;  /* 12 */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;  /* eyebrow / overline */
}

/* bluecoat IT - Spacing, sizing & radii (4px base grid) */

:root {
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-10:  4rem;     /* 64 */
  --space-12:  5rem;     /* 80 */
  --space-16:  8rem;     /* 128 */

  /* Radii - soft, friendly but not bubbly */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: var(--space-5);
}

/* bluecoat IT - Elevation, shadows, borders & motion
   Shadows are soft and subtly blue-tinted (cool navy), never neutral-grey.
   bluecoat surfaces feel calm and trustworthy - low, diffuse elevation. */

:root {
  /* Shadows - tinted with deep navy for a calm, premium feel */
  --shadow-xs:  0 1px 2px rgba(11, 42, 74, 0.06);
  --shadow-sm:  0 1px 3px rgba(11, 42, 74, 0.08), 0 1px 2px rgba(11, 42, 74, 0.04);
  --shadow-md:  0 4px 12px rgba(11, 42, 74, 0.08), 0 2px 4px rgba(11, 42, 74, 0.05);
  --shadow-lg:  0 12px 28px rgba(11, 42, 74, 0.10), 0 4px 10px rgba(11, 42, 74, 0.05);
  --shadow-xl:  0 24px 50px rgba(11, 42, 74, 0.14), 0 8px 18px rgba(11, 42, 74, 0.06);

  /* Brand glow - for primary CTAs / focus emphasis */
  --shadow-brand: 0 10px 24px rgba(31, 124, 245, 0.28);

  /* Focus ring */
  --ring-width: 3px;
  --ring: 0 0 0 var(--ring-width) rgba(31, 124, 245, 0.35);

  /* Borders */
  --border-hairline: 1px solid var(--border-subtle);
  --border-line:     1px solid var(--border-default);

  /* Motion - calm, no bounce. Ease-out for entrances. */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
}

/* bluecoat IT - Base element defaults & helper classes
   Lightweight resets so specimens and kits inherit the brand voice. */

:root {
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

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

/* Eyebrow / overline label */
.bc-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-brand-deep);
}

/* Brand gradient text */
.bc-gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

::selection {
  background: var(--blue-200);
  color: var(--blue-900);
}