/* ============================================================================
   YOTTASECURE — Design System Foundations
   Colors + Typography + Spacing + Radii + Shadows
   ----------------------------------------------------------------------------
   Aesthetic: technical & precise, engineer-first, dark console + light marketing
   Brand mark: neural-network node graph in a blue -> teal gradient
   Fonts: Space Grotesk (geometric sans) + JetBrains Mono (data / code / labels)
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---------------------------------------------------------------- FONTS  */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-sans:    'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ------------------------------------------------------- BRAND GRADIENT  */
  /* Sampled directly from the logo mark (blue at left -> teal at right)      */
  --brand-blue:  #16BBE9;
  --brand-cyan:  #1BC2D4;
  --brand:       #1FC8D2;   /* signature signal color */
  --brand-teal:  #3AD9C9;
  --brand-mint:  #43E0C3;
  --brand-gradient:      linear-gradient(96deg, #16BBE9 0%, #25CBCF 52%, #43E0C3 100%);
  --brand-gradient-soft: linear-gradient(96deg, rgba(22,187,233,.16) 0%, rgba(67,224,195,.16) 100%);
  --brand-radial:        radial-gradient(120% 120% at 30% 0%, rgba(22,187,233,.22) 0%, rgba(67,224,195,.08) 45%, transparent 70%);

  /* Tints / shades of the signal color for states */
  --brand-100: #D5F6FA;
  --brand-200: #A6ECF3;
  --brand-300: #6FDDE8;
  --brand-400: #36CCDB;
  --brand-500: #1FC8D2;
  --brand-600: #149DAC;
  --brand-700: #117A87;
  --brand-800: #0E5A64;

  /* ---------------------------------------------------- DARK SURFACES (UI) */
  --bg-0:  #070A10;   /* deepest backdrop */
  --bg-1:  #0B0F17;   /* page canvas */
  --bg-2:  #111723;   /* panel */
  --bg-3:  #161E2C;   /* card */
  --bg-4:  #1E2838;   /* raised / hover */
  --border-1: #1D2735; /* hairline */
  --border-2: #2A3849; /* visible border */
  --border-3: #38495C; /* strong / focus ring track */

  --fg-1: #EAF1F8;   /* primary text */
  --fg-2: #9CABBE;   /* secondary text */
  --fg-3: #62748B;   /* tertiary / captions */
  --fg-4: #45566C;   /* disabled / faint */

  /* --------------------------------------------------- LIGHT SURFACES (MK) */
  --l-bg-0:  #FFFFFF;
  --l-bg-1:  #F6F9FC;
  --l-bg-2:  #EDF2F8;
  --l-bg-3:  #E4EBF3;
  --l-border-1: #E7EDF4;
  --l-border-2: #D6DFEA;
  --l-fg-1: #0A0F17;
  --l-fg-2: #45566B;
  --l-fg-3: #6E7F94;
  --l-fg-4: #9AAABC;

  /* --------------------------------------------------------- SEMANTIC      */
  --success: #2FD79B;
  --success-bg: rgba(47,215,155,.12);
  --warning: #F5B93C;
  --warning-bg: rgba(245,185,60,.12);
  --danger:  #FF4D5E;
  --danger-bg: rgba(255,77,94,.12);
  --info:    #16BBE9;
  --info-bg: rgba(22,187,233,.12);

  /* --------------------------------- VULNERABILITY SEVERITY SCALE (domain) */
  --sev-critical: #FF4D5E;
  --sev-high:     #FF8A3D;
  --sev-medium:   #F5B93C;
  --sev-low:      #16BBE9;
  --sev-info:     #7C8BA0;

  /* --------------------------------------------------------- TYPE SCALE    */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   25px;
  --text-2xl:  32px;
  --text-3xl:  42px;
  --text-4xl:  56px;
  --text-5xl:  72px;
  --text-6xl:  94px;

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-label:  0.16em;   /* uppercase mono kickers */

  /* --------------------------------------------------------- SPACING (4px) */
  --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;

  /* --------------------------------------------------------- RADII (sharp) */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* --------------------------------------------------------- SHADOWS       */
  --shadow-sm: 0 1px 2px rgba(2,6,12,.5);
  --shadow-md: 0 6px 22px rgba(2,6,12,.45);
  --shadow-lg: 0 20px 56px rgba(2,6,12,.55);
  --shadow-l-sm: 0 1px 2px rgba(15,30,55,.06);
  --shadow-l-md: 0 8px 28px rgba(15,30,55,.10);
  --shadow-l-lg: 0 24px 60px rgba(15,30,55,.14);

  /* glows — the signature focus / emphasis treatment */
  --glow-brand: 0 0 0 1px rgba(31,200,210,.45), 0 0 28px rgba(31,200,210,.28);
  --glow-soft:  0 0 40px rgba(31,200,210,.20);
  --ring-focus: 0 0 0 3px rgba(31,200,210,.35);

  /* --------------------------------------------------------- MOTION        */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 380ms;
}

/* ============================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ============================================================================ */
.ys-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand);
}
.ys-display {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.ys-h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.ys-h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
.ys-h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
.ys-h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--leading-snug);
}
.ys-body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.ys-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.ys-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0;
}
.ys-code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--bg-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  color: var(--brand-300);
}

/* gradient text helper */
.ys-grad-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}