/* =========================================================================
   OPSWAT Design System — Colors + Type
   Source: OPSWAT Brand Hub (opswat.com/brand)
   --------------------------------------------------------------------------
   Note on fonts: Simplon Norm + Simplon Mono are licensed typefaces from
   Optimo Type Foundry and are NOT available for free web embedding.
   We substitute DM Sans (primary) + JetBrains Mono (mono) as the closest
   geometric matches on Google Fonts. Roboto is loaded as the spec'd fallback.
   Replace `--font-sans` with `Simplon Norm` when production assets are
   available.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=Roboto:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ----------------------------------------------------------------------
     PRIMARY PALETTE  — Black, White, Neutrals, Blues
     These build the bulk of every layout. No tints, no opacity — use shades.
     ---------------------------------------------------------------------- */
  --color-black: #000000;
  --color-white: #FFFFFF;

  /* Neutral shades */
  --color-neutral-1200: #0C121D;
  --color-neutral-1100: #141B27;
  --color-neutral-1000: #172234;
  --color-neutral-900:  #24324B;
  --color-neutral-800:  #344565;
  --color-neutral-700:  #475B81;
  --color-neutral-600:  #607497;
  --color-neutral-500:  #A9B2C4;
  --color-neutral-400:  #C7CCD5;
  --color-neutral-300:  #DEE0E4;
  --color-neutral-200:  #EBECEE;
  --color-neutral-100:  #F8F9F9;

  /* Blue shades — OPSWAT Blue is 700 */
  --color-midnight-1200: #050F22;
  --color-blue-1100:     #091B3B;
  --color-navy-1000:     #0D2654;   /* Navy Blue — signature dark surface */
  --color-blue-900:      #123D8B;
  --color-blue-800:      #1854C3;
  --color-blue-700:      #1D6BFC;   /* OPSWAT Blue — primary CTA/link */
  --color-blue-600:      #357BFC;
  --color-blue-500:      #5690FD;
  --color-blue-400:      #77A6FD;
  --color-blue-300:      #A5C4FE;
  --color-blue-200:      #C6DAFE;
  --color-blue-100:      #E8F0FF;

  /* ----------------------------------------------------------------------
     ACCENT PALETTE  — Electric. Use sparingly (<5% of layout).
     ---------------------------------------------------------------------- */
  /* Technology Teal (600 = signature) */
  --color-teal-1200: #001D1E;
  --color-teal-1000: #016065;
  --color-teal-800:  #02A3AC;
  --color-teal-700:  #02C5CF;
  --color-teal-600:  #02E9F5;
  --color-teal-400:  #58F5FD;
  --color-teal-200:  #B8FBFE;
  --color-teal-100:  #E8FEFF;

  /* Safety Green (600 = signature) */
  --color-green-1200: #002318;
  --color-green-1000: #006C4C;
  --color-green-800:  #00B67F;
  --color-green-700:  #00DA99;
  --color-green-600:  #00FFB2;
  --color-green-400:  #59FFCD;
  --color-green-200:  #B3FFE8;
  --color-green-100:  #DFFFF5;

  /* Danger Red (700 = signature) */
  --color-red-1200: #290009;
  --color-red-1000: #7E001D;
  --color-red-800:  #D40031;
  --color-red-700:  #FF003D;
  --color-red-600:  #FF254A;
  --color-red-400:  #FF6E75;
  --color-red-200:  #FFBAB7;
  --color-red-100:  #FFDFDB;

  /* Warning Orange (700 = signature) */
  --color-orange-1200: #2B0C00;
  --color-orange-1000: #802B00;
  --color-orange-800:  #D55300;
  --color-orange-700:  #FF6B00;
  --color-orange-600:  #FF8025;
  --color-orange-400:  #FFAB6F;
  --color-orange-200:  #FFD6B9;
  --color-orange-100:  #FFEBDE;

  /* Caution Yellow (600 = signature) */
  --color-yellow-1200: #251E00;
  --color-yellow-1000: #6D5A00;
  --color-yellow-800:  #B69700;
  --color-yellow-700:  #DBB600;
  --color-yellow-600:  #FFD600;
  --color-yellow-400:  #FFE355;
  --color-yellow-200:  #FFF1AA;
  --color-yellow-100:  #FFF8D5;

  /* Education / Academy Purple */
  --color-purple-1200:  #170618;
  --color-academy-1000: #3E1142;   /* Academy Purple — sub-brand */
  --color-purple-900:   #5E1A64;
  --color-purple-800:   #7F2387;
  --color-purple-700:   #9F2CAA;
  --color-purple-600:   #BF36CB;
  --color-purple-400:   #D57CDD;
  --color-purple-200:   #ECC2EF;
  --color-purple-100:   #F7E5F8;

  /* ----------------------------------------------------------------------
     SEMANTIC TOKENS — light surface default
     ---------------------------------------------------------------------- */
  --bg-default:    var(--color-white);
  --bg-subtle:     var(--color-neutral-100);
  --bg-muted:      var(--color-neutral-200);
  --bg-strong:     var(--color-navy-1000);
  --bg-inverse:    var(--color-midnight-1200);

  --fg-default:    var(--color-neutral-1200);   /* body */
  --fg-muted:      var(--color-neutral-800);    /* secondary */
  --fg-subtle:     var(--color-neutral-600);    /* tertiary / captions */
  --fg-inverse:    var(--color-white);
  --fg-on-strong:  var(--color-neutral-200);

  --border-default: var(--color-neutral-300);
  --border-strong:  var(--color-neutral-500);
  --border-focus:   var(--color-blue-700);

  --link:          var(--color-blue-700);
  --link-hover:    var(--color-blue-800);
  --action:        var(--color-blue-700);
  --action-hover:  var(--color-blue-600);
  --action-press:  var(--color-blue-800);

  --status-success:  var(--color-green-800);
  --status-warning:  var(--color-orange-700);
  --status-caution:  var(--color-yellow-700);
  --status-danger:   var(--color-red-700);
  --status-info:     var(--color-teal-700);

  /* Signature OPSWAT gradients — skip-step, subtle */
  --gradient-navy:    linear-gradient(135deg, var(--color-midnight-1200) 0%, var(--color-navy-1000) 60%, var(--color-blue-900) 100%);
  --gradient-electric: linear-gradient(135deg, var(--color-blue-700) 0%, var(--color-teal-600) 100%);
  --gradient-action:  linear-gradient(180deg, var(--color-blue-600) 0%, var(--color-blue-700) 100%);

  /* ----------------------------------------------------------------------
     TYPOGRAPHY
     Primary: Simplon Norm  →  substituted with DM Sans (8 weights)
     Mono:    Simplon Mono  →  substituted with JetBrains Mono
     Fallback (per brand):  Roboto
     ---------------------------------------------------------------------- */
  --font-sans: "DM Sans", "Roboto", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Type scale — based on 16px baseline, multiples per brand guidance */
  --fs-12: 0.75rem;     /* 12 — caption / overline */
  --fs-14: 0.875rem;    /* 14 — small UI */
  --fs-16: 1rem;        /* 16 — body baseline */
  --fs-18: 1.125rem;    /* 18 — lead body */
  --fs-20: 1.25rem;     /* 20 — large body */
  --fs-24: 1.5rem;      /* 24 — h4 */
  --fs-32: 2rem;        /* 32 — h3 (2× baseline) */
  --fs-40: 2.5rem;      /* 40 — h2 */
  --fs-48: 3rem;        /* 48 — h1 */
  --fs-64: 4rem;        /* 64 — display (4× baseline) */
  --fs-80: 5rem;        /* 80 — hero impact */

  /* Line height per brand: 100% for impact/heroes, 130%–155% for body */
  --lh-tight:   1;
  --lh-snug:    1.15;
  --lh-normal:  1.3;
  --lh-relaxed: 1.5;
  --lh-loose:   1.55;

  /* Letter spacing — tight on display, normal on body, wide on overline */
  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-overline: 0.12em;

  /* ----------------------------------------------------------------------
     SPACING — 8-pt baseline grid (50%, 1x, 2x, 4x of 16pt = OPSWAT method)
     ---------------------------------------------------------------------- */
  --space-0:  0;
  --space-1:  4px;     /* 25% */
  --space-2:  8px;     /* 50% baseline tick */
  --space-3:  12px;
  --space-4:  16px;    /* 1× baseline */
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;    /* 2× */
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;    /* 4× */
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ----------------------------------------------------------------------
     RADII — soft, pragmatic. Cards 8–12, pills 999.
     ---------------------------------------------------------------------- */
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-pill:  999px;

  /* ----------------------------------------------------------------------
     SHADOWS — layered, navy-tinted (cool security feel, never pure black)
     ---------------------------------------------------------------------- */
  --shadow-xs:  0 1px 2px 0 rgba(12, 18, 29, 0.06);
  --shadow-sm:  0 1px 3px 0 rgba(12, 18, 29, 0.08), 0 1px 2px 0 rgba(12, 18, 29, 0.04);
  --shadow-md:  0 4px 12px -2px rgba(12, 18, 29, 0.10), 0 2px 4px -1px rgba(12, 18, 29, 0.06);
  --shadow-lg:  0 12px 32px -8px rgba(12, 18, 29, 0.18), 0 4px 8px -2px rgba(12, 18, 29, 0.08);
  --shadow-xl:  0 24px 56px -12px rgba(12, 18, 29, 0.28);
  /* Electric glow — for accent moments only, never default */
  --shadow-glow-blue: 0 0 0 1px rgba(29, 107, 252, 0.3), 0 8px 32px -4px rgba(29, 107, 252, 0.5);
  --shadow-glow-teal: 0 0 0 1px rgba(2, 233, 245, 0.3), 0 8px 32px -4px rgba(2, 233, 245, 0.5);

  /* ----------------------------------------------------------------------
     MOTION — small, purposeful. No bounces on a security product.
     ---------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

/* =========================================================================
   ELEMENT DEFAULTS  (semantic CSS — match brand hierarchy rules)
   ========================================================================= */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-default);
  background: var(--bg-default);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--fg-default);
  letter-spacing: var(--ls-tight);
  text-wrap: pretty;
  margin: 0;
}

/* Hero — Simplon Norm Bold at large sizes; 3–5 words max for impact */
h1, .h1 {
  font-size: var(--fs-64);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
h2, .h2 {
  font-size: var(--fs-48);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
h3, .h3 {
  font-size: var(--fs-32);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
h4, .h4 {
  font-size: var(--fs-24);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}
h5, .h5 {
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}
h6, .h6 {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
}

p, .body {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-default);
}
.lead {
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}
.caption {
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
}
.overline {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-muted);
}
code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.94em;
}

a, .link {
  color: var(--link);
  text-decoration: none;
  font-weight: var(--fw-medium);
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover, .link:hover { color: var(--link-hover); }

/* =========================================================================
   ICON RULESET — OPSWAT custom icon set uses .cls-1 on strokes
   ========================================================================= */
.opswat-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  color: currentColor;
  flex-shrink: 0;
}
.opswat-icon svg,
svg.opswat-icon { width: 100%; height: 100%; display: block; }
.opswat-icon .cls-1,
svg .cls-1 {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}