/* ============================================================================
   Workbench component system — the single source of truth for how UI looks.

   The cascade (top overrides only what it needs):

     1. TOKENS      site-wide variables below (:root / html.dark).
                    Change a value here → the whole site changes.
     2. COMPONENTS  .wb-card / .wb-btn / .wb-input / .wb-check / .wb-badge /
                    .wb-tab. The LOOK of each element, defined once.
                    Change a rule here → every app changes.
     3. APP SCOPE   base.html puts `app-<name>` on <main> automatically
                    (app-bible, app-attendance, app-hub). Override tokens or
                    components for one app — see the example at the bottom.
     4. INSTANCE    an extra class or inline style on a single element.

   To restyle "all checkboxes", edit `.wb-check`. To rebrand one app, override
   a token inside its `.app-*` block. Nothing else has to be touched.

   Components read from tokens, so they are theme-correct in light and dark
   without any per-theme duplication.
   ========================================================================== */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */
:root{
  /* surfaces & lines */
  --wb-bg:#fafafa;            /* page */
  --wb-surface:#ffffff;       /* cards */
  --wb-surface-2:#fafafa;     /* subtle raised rows/headers */
  --wb-surface-inset:#f0f0f0; /* inset wells */
  --wb-input-bg:#ffffff;
  --line:#e4e4e4;             /* borders/dividers (shared w/ legacy layer) */

  /* text */
  --wb-text:#242424;
  --wb-text-strong:#111111;
  --wb-text-muted:#5a5a5a;
  --wb-text-faint:#767676;

  /* brand accent (teal) */
  --accent:#189d7e;
  --accent-soft:rgba(24,157,126,.12);
  --accent-hover:#0e7a61;

  /* primary button — ink on light */
  --wb-primary-bg:#171717;
  --wb-primary-bg-hover:#000000;
  --wb-primary-fg:#ffffff;

  /* checkbox fill when checked */
  --wb-check:var(--accent);

  /* shape */
  --wb-radius:0.75rem;        /* cards */
  --wb-radius-sm:0.5rem;      /* controls */
}
html.dark{
  --wb-bg:#0d0d0d;
  --wb-surface:#121212;
  --wb-surface-2:#1a1a1a;
  --wb-surface-inset:#1f1f1f;
  --wb-input-bg:#0d0d0d;
  --line:#1f1f1f;

  --wb-text:#bbbbbb;
  --wb-text-strong:#ffffff;
  --wb-text-muted:#999999;
  --wb-text-faint:#777777;

  --accent:#43ccae;
  --accent-soft:rgba(67,204,174,.14);
  --accent-hover:#6adcc4;

  /* primary button — light-on-dark */
  --wb-primary-bg:#d6d6d6;
  --wb-primary-bg-hover:#ffffff;
  --wb-primary-fg:#0a0a0a;

  color-scheme:dark;
}

/* ── 2. COMPONENTS ───────────────────────────────────────────────────────── */

/* Card — surface + border + radius. Padding/layout stay as utilities. */
.wb-card{
  background:var(--wb-surface);
  border:1px solid var(--line);
  border-radius:var(--wb-radius);
}

/* Buttons — one shape, three intents. Keep w-full/layout utilities alongside. */
.wb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.5rem .85rem;
  font:inherit;font-size:.875rem;font-weight:500;line-height:1.25rem;
  border:1px solid transparent;border-radius:var(--wb-radius-sm);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color .15s,border-color .15s,color .15s;
}
.wb-btn-primary{background:var(--wb-primary-bg);color:var(--wb-primary-fg);}
.wb-btn-primary:hover{background:var(--wb-primary-bg-hover);}
.wb-btn-ghost{background:var(--wb-surface);color:var(--wb-text);border-color:var(--line);}
.wb-btn-ghost:hover{border-color:var(--accent);color:var(--wb-text-strong);}
.wb-btn-accent{background:var(--accent-soft);color:var(--accent);}
.wb-btn-accent:hover{border-color:var(--accent);}

/* Inputs / selects / textareas */
.wb-input{
  background:var(--wb-input-bg);color:var(--wb-text);
  border:1px solid var(--line);border-radius:var(--wb-radius-sm);
  padding:.5rem .75rem;font:inherit;font-size:.875rem;line-height:1.25rem;
}
.wb-input::placeholder{color:var(--wb-text-faint);}
.wb-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}

/* Checkbox — branded, consistent (native checkboxes were unstyled before). */
.wb-check{
  width:1.25rem;height:1.25rem;flex-shrink:0;
  border-radius:.3rem;accent-color:var(--wb-check);cursor:pointer;
}
.wb-check--sm{width:1rem;height:1rem;}

/* Badge — pill shape. Color comes from a variant or a utility class. */
.wb-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.1rem .5rem;font-size:.75rem;font-weight:500;line-height:1.4;
  border-radius:999px;white-space:nowrap;
}

/* Completable dot — hollow ring that fills with the accent + a check when done.
   Used for the home "Today" checklist; pair with a click handler on the row. */
.wb-dot{
  width:1.3rem;height:1.3rem;flex-shrink:0;border-radius:999px;
  border:2px solid var(--line);display:inline-grid;place-items:center;
  color:transparent;transition:border-color .15s,background-color .15s,color .15s;
}
.wb-dot svg{width:.72rem;height:.72rem;}
button:hover .wb-dot{border-color:var(--accent);}
.wb-dot--done{background:var(--accent);border-color:var(--accent);color:#fff;}
html.dark .wb-dot--done{color:#0a0a0a;}

/* Today card — teal outline on track; the modifier turns it amber when behind. */
.today-card{border-color:var(--accent);}
.today-card--behind{border-color:#f59e0b;}

/* Tabs */
.wb-tabs{display:flex;align-items:center;gap:.25rem;border-bottom:1px solid var(--line);margin-bottom:1.5rem;}
.wb-tab{
  padding:.5rem .75rem;font-size:.875rem;color:var(--wb-text-faint);
  text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .15s,border-color .15s;
}
.wb-tab:hover{color:var(--wb-text-strong);}
.wb-tab--active{color:var(--accent);border-bottom-color:var(--accent);font-weight:500;}

/* ── 3. APP SCOPE (example) ──────────────────────────────────────────────────
   base.html adds app-bible / app-attendance / app-hub to <main>. To give one
   app its own accent (which flows into buttons, checkboxes, tabs, focus rings
   automatically, because they all read --accent), uncomment and edit:

   .app-bible{ --accent:#7c6cff; --accent-soft:rgba(124,108,255,.14); }

   Or restyle a component for just one app:
   .app-attendance .wb-card{ border-radius:1rem; }
   ────────────────────────────────────────────────────────────────────────── */