/* ============================================================
   NightKit Design Tokens — single source of truth
   Shared by landing.html, app.html (via css/app.css) and login.html.
   Values are normalised from the real values that were in use; near
   identical values (e.g. #0a0a0a vs #0c0c0c, #888 vs #aaa) collapse
   onto one token on purpose. This file defines the design language;
   it does not style any element.
   ============================================================ */
:root {
  /* ---- Colours ---------------------------------------------------- */
  --color-bg:            #0a0a0a; /* page background (was #0a0a0a / #0c0c0c) */
  --color-surface:       #111111; /* cards, panels (was #111 / #111111) */
  --color-surface-2:     #1a1a1a; /* inputs, pills, raised chips (was #1a1a1a / #161616) */
  --color-border:        #222222; /* default borders (was #222 / rgba white .07–.12) */
  --color-border-strong: #333333; /* lighter/visible borders: inputs, pills (was #333) */

  --color-text:          #ffffff; /* primary text (was #fff / #f5f5f0) */
  --color-text-muted:    #888888; /* secondary text (was #888 / #aaa / #bbb) */
  --color-text-dim:      #555555; /* tertiary text, placeholders (was #555 / #666) */

  --color-accent:        #ccff00; /* brand accent */
  --color-accent-hover:  #b8e600; /* accent, slightly darker for :hover */
  --color-accent-ink:    #0c0c0c; /* text/icon colour ON the accent */

  --color-danger:        #ff5a5a; /* errors */
  --color-success:       #7ce38b; /* success / "done" */

  /* ---- Radii ------------------------------------------------------ */
  --radius-xs:   4px;  /* tiny handles, progress bars (was 2–5px) */
  --radius-sm:   8px;  /* buttons, inputs, chips (was 6–9px) */
  --radius-md:   12px; /* mid cards (was 10–12px) */
  --radius-lg:   16px; /* large cards, modals (was 14–16px) */
  --radius-pill: 100px;/* pill chips / fully rounded bars */
  --radius-full: 50%;  /* circles (avatars, dots) */

  /* ---- Spacing scale (4-based) ------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Elevation shadows ------------------------------------------ */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.4);      /* subtle lift */
  --shadow-md: 0 16px 40px rgba(0,0,0,.5);    /* cards, menus (was 10–16 / 28–44) */
  --shadow-lg: 0 30px 80px rgba(0,0,0,.55);   /* modals, login card (was 18–30 / 50–80) */
  --glow-accent: 0 8px 30px rgba(204,255,0,.4); /* accent button glow */

  /* ---- Typography ------------------------------------------------- */
  /* Font families: Inter for all UI text, Syne for display/headlines.
     Both loaded via the Google Fonts <link> in each HTML head. */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Syne', 'Inter', sans-serif;

  /* Type scale (SaaS-grade). --font-size-2xs kept for existing micro labels. */
  --font-size-2xs: 10px;
  --font-size-xs:  11px;
  --font-size-sm:  13px;
  --font-size-base:15px; /* default UI text */
  --font-size-md:  17px;
  --font-size-lg:  20px;
  --font-size-xl:  24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 42px;
  --font-size-4xl: 56px;

  --font-weight-regular:    400;
  --font-weight-normal:     400; /* alias of regular (kept for existing consumers) */
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;

  --line-height-tight:   1.15;
  --line-height-snug:    1.3;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.65;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.06em;
  --letter-spacing-wider:  0.12em;
}