/* ============================================================
   Cyclops Labs GmbH — Brand Design Tokens
   "Calm horizons over deep compute."
   Soft, light blues & white, anchored by the logo's charcoal ink.
   All tokens are namespaced --cy-*
   ============================================================ */

:root {
  /* ---- Core brand (softened, lighter) ---- */
  --cy-primary:        #5B93DE;   /* Cyclops Blue — soft azure, the signature */
  --cy-primary-hover:  #3F78C7;
  --cy-navy:           #28456C;   /* Soft Deep Blue — gentle depth */
  --cy-cyan:           #5FC6E8;   /* Quantum Cyan — soft sky-cyan accent */
  --cy-ink:            #4A4E57;   /* logo's native charcoal — warm neutral */

  /* ---- Cyclops Blue scale (soft / airy) ---- */
  --cy-blue-50:  #F3F8FE;
  --cy-blue-100: #E4EFFC;
  --cy-blue-200: #CADEF9;
  --cy-blue-300: #A9C9F3;
  --cy-blue-400: #84AFEA;
  --cy-blue-500: #5B93DE;   /* = primary */
  --cy-blue-600: #3F78C7;
  --cy-blue-700: #335F9E;
  --cy-blue-800: #2A4B7A;
  --cy-blue-900: #28456C;   /* = navy */

  /* ---- Quantum Cyan accent scale (soft; use sparingly: highlights, data, focus) ---- */
  --cy-cyan-300: #A6E4F5;
  --cy-cyan-400: #79D2EE;
  --cy-cyan-500: #5FC6E8;
  --cy-cyan-600: #3FA9CF;

  /* ---- Sky / cloud tints & whites (airy warmth, surfaces) ---- */
  --cy-white:    #FFFFFF;
  --cy-mist:     #F6FAFE;   /* default page background — barely-blue white */
  --cy-vapor:    #EAF3FC;   /* subtle section fill */
  --cy-sky:      #D4E6FA;   /* borders, dividers on light */

  /* ---- Neutral "ink" scale (cooled charcoal from the logo) ---- */
  --cy-ink-900: #243049;    /* primary text on light (softly blue-cast) */
  --cy-ink-700: #3A4258;
  --cy-ink-500: #4A4E57;    /* logo charcoal */
  --cy-ink-400: #6A7280;    /* secondary text */
  --cy-ink-300: #93A0B2;    /* muted / placeholder */
  --cy-ink-200: #C7D2E0;
  --cy-ink-100: #E6EDF6;    /* hairlines on white */

  /* ---- Semantic (calm, non-alarming — matches the warm persona) ---- */
  --cy-success: #36B083;
  --cy-warning: #EBB05A;
  --cy-danger:  #E27A75;
  --cy-info:    var(--cy-primary);

  /* ---- Signature gradients (soft) ---- */
  /* Quantum Horizon: heroes, key CTAs, the "future" surfaces */
  --cy-grad-horizon: linear-gradient(135deg, #3F78C7 0%, #5B93DE 50%, #84B4EC 100%);
  /* Cloud Lift: soft light sections, cards */
  --cy-grad-cloud:   linear-gradient(180deg, #F6FAFE 0%, #EAF3FC 100%);
  /* Qubit glow: subtle radial for accents/badges */
  --cy-grad-qubit:   radial-gradient(circle at 30% 30%, #79D2EE 0%, #5B93DE 70%);

  /* ---- Typography ---- */
  --cy-font-display: "Poppins", "Segoe UI", system-ui, sans-serif;  /* warm geometric, echoes the wordmark */
  --cy-font-body:    "Inter", system-ui, -apple-system, sans-serif; /* precise, technical, screen-first */
  --cy-font-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, monospace; /* HPC / quantum data */

  /* Type scale — 1.25 (major third), base 16px */
  --cy-fs-display: 3.815rem;  /* 61px */
  --cy-fs-h1:      3.052rem;  /* 49px */
  --cy-fs-h2:      2.441rem;  /* 39px */
  --cy-fs-h3:      1.953rem;  /* 31px */
  --cy-fs-h4:      1.563rem;  /* 25px */
  --cy-fs-h5:      1.25rem;   /* 20px */
  --cy-fs-body-lg: 1.125rem;  /* 18px */
  --cy-fs-body:    1rem;      /* 16px */
  --cy-fs-small:   0.875rem;  /* 14px */
  --cy-fs-caption: 0.75rem;   /* 12px */

  --cy-lh-tight: 1.15;   /* headings */
  --cy-lh-snug:  1.35;
  --cy-lh-body:  1.6;    /* body copy */

  --cy-ls-display: -0.02em;  /* tighten large display */
  --cy-ls-caps:    0.08em;   /* tracked-out small caps / eyebrows */

  /* ---- Spacing scale (4px base) ---- */
  --cy-space-1: 0.25rem;  --cy-space-2: 0.5rem;  --cy-space-3: 0.75rem;
  --cy-space-4: 1rem;     --cy-space-6: 1.5rem;  --cy-space-8: 2rem;
  --cy-space-12: 3rem;    --cy-space-16: 4rem;   --cy-space-24: 6rem;

  /* ---- Radius — squared but smooth (buttons squared per brand direction) ---- */
  --cy-radius-sm:   6px;
  --cy-radius-md:   10px;
  --cy-radius-lg:   16px;
  --cy-radius-xl:   24px;
  --cy-radius-btn:  8px;    /* buttons: squared, smooth corners */
  --cy-radius-pill: 999px;

  /* ---- Elevation — soft, blue-tinted (never harsh black) ---- */
  --cy-shadow-sm: 0 1px 2px rgba(40, 69, 108, 0.05), 0 1px 3px rgba(40, 69, 108, 0.07);
  --cy-shadow-md: 0 4px 14px rgba(40, 69, 108, 0.07), 0 2px 4px rgba(40, 69, 108, 0.05);
  --cy-shadow-lg: 0 14px 36px rgba(40, 69, 108, 0.11), 0 4px 8px rgba(40, 69, 108, 0.05);
  --cy-shadow-glow: 0 0 0 4px rgba(91, 147, 222, 0.22); /* focus ring / qubit glow */

  /* ---- Motion — gentle, optimistic, never abrupt ---- */
  --cy-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --cy-dur-fast: 140ms;
  --cy-dur: 240ms;
  --cy-dur-slow: 420ms;
}

/* Dark surface variant — for "deep compute" sections & datacenter contexts */
:root .cy-dark, .cy-dark {
  --cy-bg:        var(--cy-navy);
  --cy-surface:   #335F9E;
  --cy-text:      #EAF3FC;
  --cy-text-soft: #CADEF9;
  --cy-border:    rgba(202, 222, 249, 0.20);
}