/* ==========================================================================
   AlgorizmCore — Design tokens
   Every color, type size, spacing step, radius and motion value lives here.
   Components reference tokens only; never hard-code values in styles.css.
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --c-black:    #0B0D10;   /* Core Black — page background */
  --c-black-2:  #11141A;   /* secondary section background */
  --c-graphite: #171A20;   /* Graphite — surfaces, cards */
  --c-graphite-2: #1E222A; /* raised surface / hover */
  --c-cyan:     #27D3E6;   /* Electric Cyan — primary accent */
  --c-violet:   #7657FF;   /* Digital Violet — secondary accent */
  --c-white:    #F5F7FA;   /* Off White — primary text */

  /* Neutral gray ramp, derived from Core Black → Off White */
  --c-gray-100: #DDE1E7;
  --c-gray-200: #B9BFC9;
  --c-gray-300: #8F97A3;   /* muted text */
  --c-gray-400: #626A76;   /* faint text, captions */
  --c-gray-500: #3A404A;   /* strong lines */
  --c-gray-600: #262B33;   /* default lines */
  --c-gray-700: #1B1F26;   /* subtle lines */

  /* Semantic aliases */
  --bg:          var(--c-black);
  --bg-2:        var(--c-black-2);
  --surface:     var(--c-graphite);
  --surface-2:   var(--c-graphite-2);
  --text:        var(--c-white);
  --text-2:      var(--c-gray-200);
  --text-muted:  var(--c-gray-300);
  --text-faint:  var(--c-gray-400);
  --line:        var(--c-gray-600);
  --line-strong: var(--c-gray-500);
  --accent:      var(--c-cyan);
  --accent-2:    var(--c-violet);
  --accent-ink:  var(--c-black);            /* text on accent fills */
  --gradient:    linear-gradient(135deg, var(--c-cyan) 0%, var(--c-violet) 100%);
  --focus-ring:  0 0 0 2px var(--bg), 0 0 0 4px var(--c-cyan);

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale (min at 375px → max at 1440px) */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:   clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --fs-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --fs-md:   clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-lg:   clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  --fs-xl:   clamp(1.6rem, 1.3rem + 1.4vw, 2.5rem);
  --fs-2xl:  clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  --fs-3xl:  clamp(2.5rem, 1.6rem + 4.2vw, 5.25rem);

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.6;
  --lh-loose: 1.75;

  --ls-tight: -0.03em;
  --ls-snug:  -0.015em;
  --ls-wide:  0.12em;

  --fw-regular: 400;
  --fw-medium:  500;

  --measure: 62ch;        /* max body line length */
  --measure-narrow: 44ch;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  --section-y: clamp(4.5rem, 4rem + 6vw, 9rem);
  --gutter:    clamp(1.25rem, 1rem + 2.5vw, 3rem);
  --container: 80rem;      /* 1280px */
  --container-narrow: 46rem;

  /* ---- Shape ------------------------------------------------------------ */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-lift: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --glow-cyan:   0 0 0 1px rgba(39, 211, 230, 0.35), 0 8px 30px -10px rgba(39, 211, 230, 0.35);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   150ms;
  --dur-base:   260ms;
  --dur-slow:   600ms;

  /* ---- Layout ----------------------------------------------------------- */
  --nav-h: 4.5rem;
  --z-nav: 100;
  --z-menu: 110;
}