/* ═══════════════════════════════════════════════════════════════
   Relink Design System — Tokens
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  /* ── Background Scale ── */
  --color-bg-base:       #111111;
  --color-bg-elevated:   #171717;
  --color-bg-secondary:  #1e1e1e;
  --color-bg-tertiary:   #252525;
  --color-bg-quaternary: #2d2d2d;
  --color-bg-quinary:    #363636;

  /* ── Surface ── */
  --color-surface:        rgba(255,255,255,.04);
  --color-surface-hover:  rgba(255,255,255,.06);
  --color-surface-active: rgba(255,255,255,.09);

  /* ── Border ── */
  --color-border-subtle:   rgba(255,255,255,.07);
  --color-border-default:  rgba(255,255,255,.11);
  --color-border-strong:   rgba(255,255,255,.16);

  /* ── Text ── */
  --color-text-primary:    #e8e8e7;
  --color-text-secondary:  #a8a8a5;
  --color-text-tertiary:   #6e6e6b;
  --color-text-quaternary: #4a4a47;
  --color-text-disabled:   #2e2e2c;

  /* ── Accent ── */
  --color-accent:        #4B6EF5;
  --color-accent-hover:  #5f80f7;
  --color-accent-light:  #7ab3fa;
  --color-accent-bg:     rgba(75,110,245,.12);
  --color-accent-bg-strong: rgba(75,110,245,.20);

  /* ── Semantic ── */
  --color-green:    #52a876;
  --color-green-bg: rgba(82,168,118,.12);
  --color-amber:    #E87C3E;
  --color-amber-bg: rgba(232,124,62,.12);
  --color-purple:   #9d78d4;
  --color-purple-bg:rgba(157,120,212,.12);
  --color-red:      #d46e6e;
  --color-red-bg:   rgba(212,110,110,.12);

  /* ── Radius ── */
  --radius-sm:  4px;
  --radius-md:  7px;
  --radius-lg:  10px;
  --radius-xl:  14px;
  --radius-2xl: 20px;

  /* ── Shadow ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.6);

  /* ── Typography ── */
  --font-sans:  'Inter', -apple-system, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-mono:  'SF Mono', 'Fira Code', monospace;

  /* ── Transition ── */
  --transition-fast: 100ms ease;
  --transition-base: 160ms ease;
  --transition-slow: 250ms ease;

  /* ═══════════════════════════════════════════════════════════════
     Legacy aliases (backward compatibility)
     ═══════════════════════════════════════════════════════════════ */
  --bg:          var(--color-bg-base);
  --bg2:         var(--color-bg-elevated);
  --bg3:         var(--color-bg-secondary);
  --bg4:         var(--color-bg-tertiary);
  --bg5:         var(--color-bg-quaternary);
  --bg6:         var(--color-bg-quinary);
  --surface:     var(--color-surface);
  --hover:       var(--color-surface-hover);
  --active:      var(--color-surface-active);
  --border:      var(--color-border-subtle);
  --border2:     var(--color-border-default);
  --border3:     var(--color-border-strong);
  --t1:          var(--color-text-primary);
  --t2:          var(--color-text-secondary);
  --t3:          var(--color-text-tertiary);
  --t4:          var(--color-text-quaternary);
  --t5:          var(--color-text-disabled);
  --accent:      var(--color-accent);
  --accent2:     var(--color-accent-light);
  --accent-light: var(--color-accent-light);
  --accent-bg:   var(--color-accent-bg);
  --accent-bg2:  var(--color-accent-bg-strong);
  --green:       var(--color-green);
  --green-bg:    var(--color-green-bg);
  --amber:       var(--color-amber);
  --amber-bg:    var(--color-amber-bg);
  --purple:      var(--color-purple);
  --purple-bg:   var(--color-purple-bg);
  --red:         var(--color-red);
  --red-bg:      var(--color-red-bg);
  --r:           var(--radius-md);
  --r-sm:        var(--radius-sm);
  --r-md:        var(--radius-md);
  --r-lg:        var(--radius-lg);
  --r-xl:        var(--radius-xl);
  --shadow:      var(--shadow-md);
  --font:        var(--font-sans);
  --serif:       var(--font-serif);
  --t-fast:      var(--transition-fast);
  --t-base:      var(--transition-base);
  --t-slow:      var(--transition-slow);
}

html, body {
  height: 100%;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-bg-tertiary) transparent;
}

*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--color-bg-tertiary); border-radius: 3px; }

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }