/* ========================================================================
   Water in Salt — shared design system for deckroom panels
   Mirrors the color palette, typography and surface treatment from
   waterinsalt.com (dark mode). Used by index.html, admin.html, workspace.html.
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* HSL channels — use as `hsl(var(--primary))` or `hsl(var(--primary) / .5)` */
  --background: 168 20% 6%;
  --foreground: 0 0% 98%;
  --card: 168 20% 8%;
  --card-2: 168 20% 11%;
  --popover: 168 20% 8%;
  --primary: 145 70% 50%;
  --primary-foreground: 168 100% 8%;
  --primary-deep: 168 100% 12%;
  --secondary: 168 20% 14%;
  --muted: 168 20% 14%;
  --muted-foreground: 168 10% 70%;
  --accent: 145 80% 55%;
  --destructive: 2 65% 50%;
  --warning: 38 92% 55%;
  --border: 168 20% 18%;
  --input: 168 20% 18%;
  --ring: 145 57% 58%;
  --radius: .8rem;

  /* Convenience flat tokens */
  --bg: hsl(var(--background));
  --fg: hsl(var(--foreground));
  --card-bg: hsl(var(--card));
  --card-bg-2: hsl(var(--card-2));
  --border-c: hsl(var(--border));
  --muted-fg: hsl(var(--muted-foreground));
  --primary-c: hsl(var(--primary));
  --accent-c: hsl(var(--accent));
  --destructive-c: hsl(var(--destructive));
  --warning-c: hsl(var(--warning));

  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', sans-serif;

  --shadow-elegant: 0 10px 30px -10px hsl(var(--primary-deep) / .35);
  --shadow-glow: 0 0 40px -10px hsl(var(--accent) / .35);
  --gradient-primary: linear-gradient(135deg, hsl(var(--primary-deep)) 0%, hsl(168 60% 22%) 50%, hsl(var(--accent)) 100%);
  --gradient-text: linear-gradient(135deg, hsl(var(--foreground)), hsl(var(--accent)));
  --transition: all .25s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.01em; }

a { color: hsl(var(--accent)); text-decoration: none; transition: var(--transition); }
a:hover { color: hsl(var(--primary)); }

/* Subtle background grid for hero/login surfaces */
.wis-grid-bg {
  background-image:
    linear-gradient(hsl(var(--primary) / .04) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--primary) / .04) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 60%, transparent 100%);
}

/* Wordmark used in panel headers */
.wis-wordmark {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
}
.wis-wordmark img { width: 28px; height: 28px; filter: drop-shadow(0 0 8px hsl(var(--accent) / .4)); }
.wis-wordmark .wis-tagline { color: hsl(var(--muted-foreground)); font-weight: 500; font-size: .8rem; margin-left: .4rem; }

/* Buttons */
.wis-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem 1rem;
  border-radius: .5rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card-2));
  color: hsl(var(--foreground));
  font-family: var(--font-body); font-weight: 500; font-size: .85rem;
  cursor: pointer; transition: var(--transition);
  text-decoration: none;
}
.wis-btn:hover { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .12); color: hsl(var(--foreground)); }
.wis-btn-primary {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 600;
  box-shadow: 0 0 24px -6px hsl(var(--primary) / .6);
}
.wis-btn-primary:hover { background: hsl(var(--accent)); border-color: hsl(var(--accent)); box-shadow: 0 0 32px -4px hsl(var(--accent) / .8); }
.wis-btn-danger { color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / .4); background: hsl(var(--destructive) / .1); }
.wis-btn-danger:hover { background: hsl(var(--destructive) / .2); border-color: hsl(var(--destructive)); color: hsl(var(--destructive)); }
.wis-btn-sm { padding: .35rem .7rem; font-size: .75rem; }

/* Card surface */
.wis-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.25rem;
  transition: var(--transition);
}
.wis-card:hover { border-color: hsl(var(--primary) / .35); }

/* Inputs */
.wis-input, .wis-select {
  width: 100%;
  padding: .65rem .85rem;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: .5rem;
  color: hsl(var(--foreground));
  font-family: var(--font-body); font-size: .9rem;
  transition: var(--transition);
}
.wis-input:focus, .wis-select:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .15); }
.wis-input::placeholder { color: hsl(var(--muted-foreground)); }

/* Status pill */
.wis-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.wis-pill-success { background: hsl(var(--accent) / .15); color: hsl(var(--accent)); border: 1px solid hsl(var(--accent) / .4); }
.wis-pill-warn { background: hsl(var(--warning) / .15); color: hsl(var(--warning)); border: 1px solid hsl(var(--warning) / .4); }
.wis-pill-muted { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); }

/* Header bar shared across panels */
.wis-header {
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 1.25rem;
  background: hsl(var(--card));
  border-bottom: 1px solid hsl(var(--border));
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
}
.wis-header .wis-header-right { margin-left: auto; display: flex; gap: .5rem; align-items: center; }

/* Glow text accent (for headings) */
.wis-text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Scrollbar polish */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: hsl(var(--background)); }
::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary) / .5); }