/* =========================================
   W2D Design Tokens (v1)
   Use for: modals, cards, tabs, forms, buttons
   ========================================= */

:root{
  /* --- Core palette (Slate/Ink) --- */
  --w2d-ink: #0f172a;              /* primary dark */
  --w2d-ink-2: #111c33;            /* hover dark */
  --w2d-text: rgba(15,23,42,.92);  /* main text */
  --w2d-muted: rgba(15,23,42,.62); /* helper text */
  --w2d-border: rgba(15,23,42,.10);
  --w2d-border-2: rgba(15,23,42,.12);
  --w2d-surface: rgba(255,255,255,.96);
  --w2d-surface-2: rgba(255,255,255,.85);
  --w2d-input-bg: rgba(248,250,252,.95);

  /* --- Accent (focus ring) --- */
  --w2d-focus: rgba(99,102,241,.55);
  --w2d-focus-ring: rgba(99,102,241,.15);

  /* --- Danger --- */
  --w2d-danger: #dc2626;
  --w2d-danger-soft: rgba(220,38,38,.06);
  --w2d-danger-border: rgba(220,38,38,.18);
  --w2d-danger-text: rgba(127,29,29,.90);

  /* --- Success / Warning (optional) --- */
  --w2d-ok-soft: rgba(34,197,94,.08);
  --w2d-ok-border: rgba(34,197,94,.25);
  --w2d-warn-soft: rgba(245,158,11,.10);
  --w2d-warn-border: rgba(245,158,11,.28);

  /* --- Overlay (frosted backdrop) --- */
  --w2d-overlay: rgba(10,12,16,.72);
  --w2d-overlay-2: rgba(12,18,28,.55);
  --w2d-blur: 14px;
  --w2d-saturate: 120%;

  /* --- Radii --- */
  --w2d-r-sm: 12px;
  --w2d-r-md: 14px;
  --w2d-r-lg: 18px;
  --w2d-r-pill: 999px;

  /* --- Spacing --- */
  --w2d-pad-sm: 12px;
  --w2d-pad-md: 14px;
  --w2d-pad-lg: 18px;
  --w2d-gap-sm: 8px;
  --w2d-gap-md: 12px;

  /* --- Typography --- */
  --w2d-title: 18px;
  --w2d-title-w: 900;
  --w2d-label: 13px;
  --w2d-label-w: 800;
  --w2d-body: 14px;
  --w2d-help: 13px;

  /* --- Shadows --- */
  --w2d-shadow-modal: 0 18px 60px rgba(0,0,0,.25);
  --w2d-shadow-deep: 0 24px 60px rgba(0,0,0,.35);
  --w2d-shadow-card: 0 10px 24px rgba(0,0,0,.06);

  /* --- Motion --- */
  --w2d-ease: ease;
  --w2d-fast: .12s;

  /* --- Legacy aliases (so older W2D CSS keeps working) --- */
  --bg: #ffffff;
  --text: var(--w2d-text);
  --muted: var(--w2d-muted);
  --border: var(--w2d-border);
  --hover: rgba(15,23,42,.04);
  --accent: var(--w2d-focus);
  --danger: var(--w2d-danger);
}

/* =========================================
   Core UI patterns (optional utilities)
   ========================================= */

/* Frost overlay */
.w2d-frost{
  background: var(--w2d-overlay);
  backdrop-filter: blur(var(--w2d-blur)) saturate(var(--w2d-saturate));
  -webkit-backdrop-filter: blur(var(--w2d-blur)) saturate(var(--w2d-saturate));
}

/* Modal card surface */
.w2d-surface{
  background: var(--w2d-surface);
  border: 1px solid var(--w2d-border);
  border-radius: var(--w2d-r-lg);
  box-shadow: var(--w2d-shadow-modal);
}

/* Section container (card inside modal) */
.w2d-section{
  background: var(--w2d-surface-2);
  border: 1px solid var(--w2d-border);
  border-radius: 16px;
  padding: var(--w2d-pad-md);
  box-shadow: var(--w2d-shadow-card);
}

/* Inputs */
.w2d-input{
  width: 100%;
  border-radius: var(--w2d-r-md);
  border: 1px solid var(--w2d-border-2);
  background: var(--w2d-input-bg);
  padding: 12px;
  font-size: var(--w2d-body);
  color: var(--w2d-text);
  outline: none;
  transition:
    border-color var(--w2d-fast) var(--w2d-ease),
    box-shadow var(--w2d-fast) var(--w2d-ease),
    background-color var(--w2d-fast) var(--w2d-ease);
}
.w2d-input:focus{
  background: #fff;
  border-color: var(--w2d-focus);
  box-shadow: 0 0 0 4px var(--w2d-focus-ring);
}

/* Buttons */
.w2d-btn{
  appearance: none;
  border-radius: var(--w2d-r-pill);
  border: 1px solid var(--w2d-border-2);
  padding: 10px 14px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition:
    transform var(--w2d-fast) var(--w2d-ease),
    background-color var(--w2d-fast) var(--w2d-ease),
    border-color var(--w2d-fast) var(--w2d-ease),
    opacity var(--w2d-fast) var(--w2d-ease);
}
.w2d-btn:active{ transform: scale(.98); }
.w2d-btn[disabled]{ opacity: .65; cursor: not-allowed; }

.w2d-btn-primary{
  background: var(--w2d-ink);
  color: #fff;
  border-color: var(--w2d-ink);
}
.w2d-btn-primary:hover{
  background: var(--w2d-ink-2);
  border-color: var(--w2d-ink-2);
}

.w2d-btn-light{
  background: rgba(248,250,252,.9);
  color: var(--w2d-ink);
}
.w2d-btn-light:hover{
  background: #fff;
  border-color: rgba(15,23,42,.18);
}

.w2d-btn-danger{
  background: var(--w2d-danger);
  border-color: var(--w2d-danger);
  color: #fff;
}

/* Tab pills */
.w2d-tab{
  border-radius: var(--w2d-r-pill);
  border: 1px solid var(--w2d-border);
  background: rgba(248,250,252,.9);
  color: var(--w2d-ink);
  padding: 10px 12px;
  font-weight: 750;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--w2d-fast) var(--w2d-ease),
    border-color var(--w2d-fast) var(--w2d-ease),
    transform var(--w2d-fast) var(--w2d-ease);
}
.w2d-tab:hover{
  background: #fff;
  border-color: rgba(15,23,42,.18);
  transform: translateY(-1px);
}
.w2d-tab.is-active{
  background: var(--w2d-ink);
  border-color: var(--w2d-ink);
  color: #fff;
}

/* Helper text */
.w2d-help{
  color: var(--w2d-muted);
  font-size: var(--w2d-help);
  line-height: 1.35;
}

/* =========================================
   Modal layout helpers (opt-in)
   -----------------------------------------
   Use this structure:

   <div class="w2d-modal-overlay w2d-frost">
     <section class="w2d-modal w2d-surface">
       <header class="w2d-modal__head">...</header>
       <div class="w2d-modal__tabs">...</div>
       <div class="w2d-modal__body">...</div>
       <footer class="w2d-modal__foot">...</footer>
     </section>
   </div>
   ========================================= */

.w2d-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.w2d-modal{
  width: min(620px, 94vw);
  max-height: min(86vh, 820px);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
}

.w2d-modal__head{
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--w2d-border);
}
.w2d-modal__title{
  margin: 0;
  font-size: var(--w2d-title);
  font-weight: var(--w2d-title-w);
  letter-spacing: -0.02em;
  color: var(--w2d-text);
}

.w2d-modal__tabs{
  padding: 10px 18px;
  border-bottom: 1px solid var(--w2d-border);
  display: flex;
  gap: 10px;
  overflow-x: auto;
}

.w2d-modal__body{
  padding: 16px 18px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.w2d-modal__foot{
  padding: 12px 18px 16px;
  border-top: 1px solid var(--w2d-border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}