/* ==========================================================================
   TogNinja — Design Tokens
   Single source of truth. Change the palette here and it propagates.
   ========================================================================== */

:root {
  /* --- Palette (per brand brief) ------------------------------------- */
  --tn-bg:         #07090d;
  --tn-surface:    #0f131a;
  --tn-surface-2:  #151b24;
  --tn-text:       #f4f2ed;
  --tn-muted:      #a4acb8;
  --tn-line:       rgba(255, 255, 255, 0.10);
  --tn-teal:       #43d6cf;
  --tn-cyan:       #64bfff;
  --tn-amber:      #f2b766;
  --tn-success:    #72d89a;
  --tn-danger:     #f27d7d;

  /* --- Derived surfaces ---------------------------------------------- */
  --tn-line-soft:  rgba(255, 255, 255, 0.05);
  --tn-line-loud:  rgba(255, 255, 255, 0.18);
  --tn-glow-teal:  rgba(67, 214, 207, 0.16);
  --tn-glow-cyan:  rgba(100, 191, 255, 0.14);
  --tn-glow-amber: rgba(242, 183, 102, 0.14);

  /* --- Typography -----------------------------------------------------
     TODO(brand): swap --tn-font-display for the licensed TogNinja display
     face once supplied. Kept as a variable so it is a one-line change.
     System stacks are used deliberately: zero network requests, zero CLS. */
  --tn-font-display: "Segoe UI Variable Display", "Segoe UI", Inter, -apple-system,
                     BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --tn-font-body:    "Segoe UI Variable Text", "Segoe UI", Inter, -apple-system,
                     BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --tn-font-mono:    "Cascadia Code", "SF Mono", "JetBrains Mono", Consolas,
                     "Liberation Mono", monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  --tn-fs-hero:  clamp(2.75rem, 1.4rem + 6.0vw, 6.5rem);
  --tn-fs-h2:    clamp(2.00rem, 1.2rem + 3.2vw, 3.75rem);
  --tn-fs-h3:    clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem);
  --tn-fs-lead:  clamp(1.05rem, 0.95rem + 0.6vw, 1.375rem);
  --tn-fs-body:  clamp(0.975rem, 0.94rem + 0.18vw, 1.0625rem);
  --tn-fs-small: 0.875rem;
  --tn-fs-micro: 0.75rem;

  --tn-lh-tight: 1.02;
  --tn-lh-snug:  1.22;
  --tn-lh-body:  1.62;

  --tn-track-tight: -0.035em;
  --tn-track-wide:   0.18em;

  /* --- Spacing scale --------------------------------------------------- */
  --tn-s1:  0.25rem;
  --tn-s2:  0.5rem;
  --tn-s3:  0.75rem;
  --tn-s4:  1rem;
  --tn-s5:  1.5rem;
  --tn-s6:  2rem;
  --tn-s7:  3rem;
  --tn-s8:  4rem;
  --tn-s9:  6rem;
  --tn-s10: 8rem;

  --tn-section-y: clamp(5rem, 3rem + 9vw, 11rem);
  --tn-gutter:    clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --tn-maxw:      1280px;
  --tn-maxw-prose: 62ch;

  /* --- Radii & elevation ----------------------------------------------- */
  --tn-r-sm: 6px;
  --tn-r-md: 12px;
  --tn-r-lg: 18px;
  --tn-r-xl: 28px;
  --tn-r-pill: 999px;

  --tn-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --tn-shadow-md: 0 12px 32px -12px rgba(0,0,0,0.7);
  --tn-shadow-lg: 0 40px 80px -32px rgba(0,0,0,0.85);

  /* --- Motion ----------------------------------------------------------- */
  --tn-dur-fast: 160ms;
  --tn-dur-med:  340ms;
  --tn-dur-slow: 720ms;
  --tn-ease:      cubic-bezier(0.22, 1, 0.36, 1);   /* expo-out, calm settle */
  --tn-ease-io:   cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Layering --------------------------------------------------------- */
  --tn-z-canvas: 0;
  --tn-z-content: 1;
  --tn-z-nav: 50;
  --tn-z-skip: 100;
}