/* ═══════════════════════════════════════════════════════
   create-user/styles/tokens.css
   Mantine CSS design tokens — Remnawave (GitHub Dark)
═══════════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ── */
  --color-bg:           #161b22;   /* page background       dark-7 */
  --color-sidebar:      #0d1117;   /* sidebar/navbar         dark-8 */
  --color-surface:      #21262d;   /* cards, panels          dark-6 */
  --color-surface-hov:  #30363d;   /* hover state            dark-5 */
  --color-dropdown:     #1c2128;   /* popups / dropdowns           */

  /* ── Borders ── */
  --color-border:       #484f58;   /* default border         dark-4 */
  --color-border-mid:   #6e7681;   /* hover border           dark-3 */
  --color-border-focus: #15aabf;   /* focus ring             primary-6 */

  /* ── Text ── */
  --color-text:         #c9d1d9;   /* primary text           dark-0 */
  --color-text-sec:     #8b949e;   /* secondary text         dark-2 */
  --color-text-muted:   #6e7681;   /* muted / placeholder    dark-3 */

  /* ── Accent (Cyan / Teal) ── */
  --color-accent:       #15aabf;   /* focus, active          primary-6 */
  --color-accent-fill:  #0c8599;   /* filled buttons         primary-filled */
  --color-accent-text:  #3bc9db;   /* text on accent bg      cyan-4 */
  --color-accent-dim:   rgba(21,170,191,0.15); /* light bg   primary-light */

  /* ── Semantic ── */
  --color-green:        #69db7c;   --color-green-dim:  rgba(64,192,87,0.15);
  --color-orange:       #ffa94d;   --color-orange-dim: rgba(253,126,20,0.15);
  --color-red:          #ff8787;   --color-red-dim:    rgba(250,82,82,0.15);
  --color-blue:         #4dabf7;   --color-blue-dim:   rgba(34,139,230,0.15);
  --color-purple:       #9775fa;   --color-purple-dim: rgba(121,80,242,0.15);

  /* ── Typography ── */
  --font-ui:    'Montserrat', Vazirmatn, 'Apple Color Emoji', 'Noto Sans SC', sans-serif;
  --font-mono:  'Fira Mono', 'Courier New', monospace;

  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-body: 13px;
  --font-size-md:   14px;
  --font-size-lg:   15px;
  --font-size-xl:   18px;
  --font-size-2xl:  22px;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semi:    600;
  --font-weight-bold:    700;

  --line-height: 1.55;

  /* ── Spacing (4px grid) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;

  /* ── Border radius ── */
  --r-xs:  4px;   /* checkbox, badge           */
  --r-sm:  6px;   /* small buttons, pills      */
  --r-md:  8px;   /* inputs, buttons, dropdowns*/
  --r-lg:  10px;  /* cards, tables             */
  --r-xl:  12px;  /* modals, hero cards        */

  /* ── Shadows ── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.5);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.6);

  /* ── Z-index ── */
  --z-dropdown: 200;
  --z-modal:    500;
  --z-menu:     600;
  --z-toast:    1000;

  /* ── Transitions ── */
  --transition-fast: all 0.12s ease;
  --transition-base: all 0.15s ease;
  --transition-slow: all 0.18s ease;
}