/* ============================================================================
   CLARITY — Design System v1.0
   Clean · light · trustworthy. For a random-stranger video-chat product.

   Single-file, import-ready component library. Paste this whole file into an
   Artifact's <style>, or link it, then build with the .c-* classes below.

   Contents:
     1.  Fonts
     2.  Tokens (:root) + dark stage + optional dark theme
     3.  Base / reset
     4.  Layout   .c-container .c-stack .c-row .c-grid
     5.  Type     .c-display .c-h1..h3 .c-body .c-muted .c-label .c-mono
     6.  Buttons  .c-btn (+ variants, sizes, states) .c-iconbtn
     7.  Forms    .c-field .c-input .c-select .c-help
     8.  Chips / badges / avatars
     9.  Cards / banners / dividers
     10. Video    .c-tile .c-pip .c-controlbar .c-connecting
     11. Feedback .c-toast .c-modal .c-spinner
     12. A11y + reduced motion
   ========================================================================== */

/* 1 ── Fonts ---------------------------------------------------------------- */
/* On your production site this loads Inter. Inside a Claude Artifact the CSP
   blocks font CDNs, so it silently falls back to the system stack below —
   visually near-identical. Swap in a self-hosted / data-URI Inter for pixel
   parity in artifacts if you need it. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

/* 2 ── Tokens -------------------------------------------------------------- */
:root{
  /* surfaces (light — marketing & settings) */
  --bg:#f7f8fa; --surface:#ffffff; --surface-2:#f1f3f6; --elevated:#ffffff;
  --border:#e4e7ec; --border-strong:#cdd2db;
  /* text */
  --text:#0f172a; --text-muted:#56607a; --text-subtle:#98a1b3;
  /* brand */
  --primary:#4f46e5; --primary-hover:#4338ca; --primary-active:#3730a3;
  --primary-contrast:#ffffff; --primary-tint:rgba(79,70,229,0.10);
  --accent:#0ea5e9;
  /* semantic (separate from the brand accent) */
  --online:#16a34a; --online-tint:rgba(22,163,74,0.12);
  --danger:#e11d48; --danger-hover:#be123c; --danger-tint:rgba(225,29,72,0.10);
  --warning:#d97706; --warning-tint:rgba(217,119,6,0.12);
  /* overlay */
  --scrim:rgba(15,23,42,0.45);
  /* radius */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
  /* spacing (4-based) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px;
  /* type */
  --font-display:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-body:var(--font-display);
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-lg:20px;
  --fs-xl:26px; --fs-2xl:36px; --fs-3xl:52px;
  --lh-tight:1.1; --lh-snug:1.35; --lh-body:1.6;
  --fw-normal:400; --fw-medium:500; --fw-bold:600;
  /* elevation (soft, diffuse — never glow) */
  --shadow-sm:0 1px 2px rgba(16,24,40,0.06),0 1px 3px rgba(16,24,40,0.10);
  --shadow-md:0 4px 12px rgba(16,24,40,0.10);
  --shadow-lg:0 16px 40px rgba(16,24,40,0.16);
  --ring:0 0 0 4px rgba(79,70,229,0.24);      /* focus ring */
  /* motion */
  --dur-fast:120ms; --dur-base:200ms;
  --ease:cubic-bezier(0.4,0,0.2,1);
  /* layout */
  --container:1080px; --gutter:clamp(16px,4vw,48px);
  color-scheme:light;
}

/* The live call flips to dark so faces read well. Put .c-stage on the
   immersive container — same tokens, dark values, so every .c-* works there. */
.c-stage{
  --bg:#0d1117; --surface:#161b22; --surface-2:#21262d; --elevated:#21262d;
  --border:rgba(255,255,255,0.10); --border-strong:rgba(255,255,255,0.20);
  --text:#f0f3f8; --text-muted:#aab2c0; --text-subtle:#6b7482;
  --primary-tint:rgba(109,99,255,0.18);
  --scrim:rgba(0,0,0,0.6);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:0 4px 14px rgba(0,0,0,0.4);
  --shadow-lg:0 18px 44px rgba(0,0,0,0.55);
  --ring:0 0 0 4px rgba(109,99,255,0.35);
  color-scheme:dark;
  background:var(--bg); color:var(--text);
}

/* Optional full dark theme (opt-in). Clarity is light-first by identity, but a
   site-wide dark mode is here if you want a toggle. Viewer/OS theme drives it. */
:root[data-theme="dark"]{
  --bg:#0d1117; --surface:#161b22; --surface-2:#21262d; --elevated:#21262d;
  --border:rgba(255,255,255,0.10); --border-strong:rgba(255,255,255,0.20);
  --text:#f0f3f8; --text-muted:#aab2c0; --text-subtle:#6b7482;
  --primary:#6d63ff; --primary-hover:#8078ff; --primary-active:#5a50f0;
  --primary-tint:rgba(109,99,255,0.18); --accent:#38bdf8;
  --danger:#fb5f7a; --danger-hover:#ff7a90;
  --scrim:rgba(0,0,0,0.6);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:0 4px 14px rgba(0,0,0,0.4);
  --shadow-lg:0 18px 44px rgba(0,0,0,0.55);
  --ring:0 0 0 4px rgba(109,99,255,0.35);
  color-scheme:dark;
}

/* 3 ── Base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
.c-root{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-md); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.c-root img{max-width:100%; display:block;}

/* 4 ── Layout -------------------------------------------------------------- */
.c-container{max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);}
.c-stack{display:flex; flex-direction:column;}
.c-stack>*+*{margin-top:var(--stack-gap,var(--s-4));}
.c-stack--lg{--stack-gap:var(--s-6);}
.c-stack--sm{--stack-gap:var(--s-2);}
.c-row{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;}
.c-row--between{justify-content:space-between;}
.c-grid{display:grid; gap:var(--s-5);}
.c-grid--3{grid-template-columns:repeat(3,1fr);}
.c-grid--2{grid-template-columns:repeat(2,1fr);}
@media (max-width:820px){ .c-grid--3{grid-template-columns:1fr;} .c-grid--2{grid-template-columns:1fr;} }
.c-center{text-align:center; align-items:center;}

/* 5 ── Typography ---------------------------------------------------------- */
.c-display{font-family:var(--font-display); font-weight:var(--fw-bold);
  font-size:var(--fs-3xl); line-height:var(--lh-tight); letter-spacing:-0.03em;
  text-wrap:balance; margin:0;}
.c-h1{font-size:var(--fs-2xl); font-weight:var(--fw-bold); line-height:var(--lh-tight);
  letter-spacing:-0.02em; text-wrap:balance; margin:0;}
.c-h2{font-size:var(--fs-xl); font-weight:var(--fw-bold); line-height:var(--lh-snug);
  letter-spacing:-0.01em; margin:0;}
.c-h3{font-size:var(--fs-lg); font-weight:var(--fw-bold); line-height:var(--lh-snug); margin:0;}
.c-body{font-size:var(--fs-md); line-height:var(--lh-body); margin:0; max-width:68ch;}
.c-muted{color:var(--text-muted);}
.c-label{font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.06em;
  font-weight:var(--fw-medium); color:var(--text-muted);}
.c-mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.c-link{color:var(--primary); text-decoration:none; font-weight:var(--fw-medium);}
.c-link:hover{text-decoration:underline;}

/* 6 ── Buttons ------------------------------------------------------------- */
.c-btn{
  --btn-bg:var(--primary); --btn-fg:var(--primary-contrast); --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-md);
  line-height:1; padding:12px 20px; border-radius:var(--r-md);
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd); cursor:pointer; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease); box-shadow:var(--shadow-sm);
}
.c-btn:hover{--btn-bg:var(--primary-hover);}
.c-btn:active{transform:translateY(1px);}
.c-btn:focus-visible{outline:none; box-shadow:var(--ring);}
.c-btn:disabled,.c-btn.is-disabled{opacity:.5; cursor:not-allowed; box-shadow:none; transform:none;}

.c-btn--secondary{--btn-bg:var(--surface); --btn-fg:var(--text); --btn-bd:var(--border-strong); box-shadow:var(--shadow-sm);}
.c-btn--secondary:hover{--btn-bg:var(--surface-2); --btn-bd:var(--border-strong);}
.c-btn--ghost{--btn-bg:transparent; --btn-fg:var(--text-muted); --btn-bd:transparent; box-shadow:none;}
.c-btn--ghost:hover{--btn-bg:var(--surface-2); --btn-fg:var(--text);}
.c-btn--danger{--btn-bg:transparent; --btn-fg:var(--danger); --btn-bd:var(--danger); box-shadow:none;}
.c-btn--danger:hover{--btn-bg:var(--danger); --btn-fg:#fff; --btn-bd:var(--danger);}
.c-btn--danger-solid{--btn-bg:var(--danger); --btn-fg:#fff; --btn-bd:transparent;}
.c-btn--danger-solid:hover{--btn-bg:var(--danger-hover);}

.c-btn--sm{padding:8px 14px; font-size:var(--fs-sm); border-radius:var(--r-sm);}
.c-btn--lg{padding:15px 28px; font-size:var(--fs-lg);}
.c-btn--block{display:flex; width:100%;}

/* loading: hides label, shows spinner */
.c-btn.is-loading{color:transparent; pointer-events:none; position:relative;}
.c-btn.is-loading::after{content:""; position:absolute; width:18px; height:18px;
  border-radius:50%; border:2px solid currentColor; border-top-color:transparent;
  color:var(--btn-fg); animation:c-spin .7s linear infinite;}

.c-iconbtn{
  width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:50%; background:var(--surface-2); color:var(--text-muted);
  border:1px solid var(--border); cursor:pointer; font-size:18px;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.c-iconbtn:hover{background:var(--elevated); color:var(--text); border-color:var(--border-strong);}
.c-iconbtn:focus-visible{outline:none; box-shadow:var(--ring);}
.c-iconbtn--danger{color:var(--danger); border-color:color-mix(in srgb,var(--danger) 45%,transparent);}
.c-iconbtn--danger:hover{background:var(--danger); color:#fff; border-color:var(--danger);}
.c-iconbtn--active{background:var(--primary-tint); color:var(--primary); border-color:transparent;}

/* 7 ── Forms --------------------------------------------------------------- */
.c-field{display:flex; flex-direction:column; gap:var(--s-2);}
.c-field>label{font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--text);}
.c-input,.c-select,.c-textarea{
  width:100%; font:inherit; color:var(--text); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-md); padding:11px 14px;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.c-input::placeholder,.c-textarea::placeholder{color:var(--text-subtle);}
.c-input:focus,.c-select:focus,.c-textarea:focus{outline:none; border-color:var(--primary); box-shadow:var(--ring);}
.c-input:disabled,.c-select:disabled{background:var(--surface-2); color:var(--text-subtle); cursor:not-allowed;}
.c-field.is-error .c-input,.c-field.is-error .c-select{border-color:var(--danger); box-shadow:0 0 0 4px var(--danger-tint);}
.c-help{font-size:var(--fs-sm); color:var(--text-muted);}
.c-field.is-error .c-help{color:var(--danger);}
.c-select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  padding-right:38px;}

/* 8 ── Chips / badges / avatars ------------------------------------------- */
.c-chip{
  display:inline-flex; align-items:center; gap:var(--s-2); font-size:var(--fs-sm);
  font-weight:var(--fw-medium); padding:7px 14px; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border);
  cursor:pointer; transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.c-chip:hover{border-color:var(--border-strong); color:var(--text);}
.c-chip:focus-visible{outline:none; box-shadow:var(--ring);}
.c-chip.is-selected{background:var(--primary-tint); color:var(--primary); border-color:var(--primary);}
.c-chip__x{opacity:.6; font-size:var(--fs-md); line-height:1;}
.c-chip__x:hover{opacity:1;}

.c-badge{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs);
  font-weight:var(--fw-medium); padding:4px 10px; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--text-muted);}
.c-badge--online{background:var(--online-tint); color:var(--online);}
.c-badge--danger{background:var(--danger-tint); color:var(--danger);}
.c-badge--warning{background:var(--warning-tint); color:var(--warning);}
.c-dot{width:8px; height:8px; border-radius:50%; background:var(--online); flex:0 0 auto;}
.c-dot--live{box-shadow:0 0 0 4px var(--online-tint); animation:c-pulse 1.6s var(--ease) infinite;}

.c-avatar{width:40px; height:40px; border-radius:50%; background:var(--surface-2);
  display:grid; place-items:center; color:var(--text-muted); font-weight:var(--fw-bold);
  overflow:hidden; flex:0 0 auto;}

/* 9 ── Cards / banners / dividers ----------------------------------------- */
.c-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--s-5); box-shadow:var(--shadow-sm);}
.c-card--flat{box-shadow:none;}
.c-divider{height:1px; background:var(--border); border:0; margin:0;}

.c-banner{display:flex; gap:var(--s-3); align-items:flex-start; background:var(--surface);
  border:1px solid var(--border); border-left:3px solid var(--primary);
  border-radius:var(--r-md); padding:var(--s-4); box-shadow:var(--shadow-sm);}
.c-banner--warning{border-left-color:var(--warning);}
.c-banner--danger{border-left-color:var(--danger);}
.c-banner__icon{flex:0 0 auto; font-size:var(--fs-lg); line-height:1.4;}

/* 10 ── Video -------------------------------------------------------------- */
.c-tile{position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:radial-gradient(120% 90% at 50% 22%,#55607a 0%,#2c3242 55%,#1a1e29 100%);
  aspect-ratio:4/3; width:100%;}
.c-tile--hero{aspect-ratio:16/10;}
.c-tile>video,.c-tile>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.c-tile__name{position:absolute; left:12px; bottom:12px; display:flex; align-items:center; gap:8px;
  font-size:var(--fs-xs); color:#fff; padding:5px 11px; border-radius:var(--r-pill);
  background:var(--scrim); backdrop-filter:blur(6px);}
.c-pip{position:absolute; right:12px; bottom:12px; width:26%; max-width:150px; aspect-ratio:4/3;
  border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-md);
  outline:2px solid var(--surface); outline-offset:-2px;
  background:radial-gradient(120% 90% at 50% 25%,#6b7690 0%,#343b4c 60%,#20242f 100%);}

.c-controlbar{display:inline-flex; align-items:center; gap:var(--s-2);
  padding:10px 12px; border-radius:var(--r-pill); background:var(--surface);
  box-shadow:var(--shadow-lg); border:1px solid var(--border);}

.c-connecting{display:flex; flex-direction:column; align-items:center; gap:var(--s-3);
  text-align:center; padding:var(--s-7) var(--s-4);}

/* 11 ── Feedback ----------------------------------------------------------- */
.c-spinner{width:22px; height:22px; border-radius:50%; border:2px solid var(--border-strong);
  border-top-color:var(--primary); animation:c-spin .7s linear infinite;}
.c-spinner--lg{width:34px; height:34px; border-width:3px;}

.c-toast{display:flex; align-items:center; gap:var(--s-3); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-3) var(--s-4);
  box-shadow:var(--shadow-md); min-width:260px;}
.c-toast__dot{width:9px; height:9px; border-radius:50%; background:var(--text-muted); flex:0 0 auto;}
.c-toast--success .c-toast__dot{background:var(--online);}
.c-toast--danger .c-toast__dot{background:var(--danger);}
.c-toast--warning .c-toast__dot{background:var(--warning);}

.c-modal{position:fixed; inset:0; display:grid; place-items:center; padding:var(--s-4); z-index:50;}
.c-modal__backdrop{position:absolute; inset:0; background:var(--scrim); backdrop-filter:blur(2px);}
.c-modal__sheet{position:relative; width:min(460px,100%); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-4);}
.c-modal__actions{display:flex; justify-content:flex-end; gap:var(--s-3); margin-top:var(--s-2);}

/* 12 ── A11y / motion ------------------------------------------------------ */
@keyframes c-spin{to{transform:rotate(360deg);}}
@keyframes c-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:none;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important;}
}