/* ============================================================
   theme-light.css — Portal Jurídico
   Light blue / light gray theme
   ============================================================

   USAGE
   -----
   Add this line inside <head>, AFTER your Google Fonts links
   and BEFORE any <style> block in the page:

     <link rel="stylesheet" href="path/to/theme-light.css" />

   The file overrides the CSS custom properties (variables) that
   all existing styles already reference, so no other changes are
   needed in hub.html or login.html.

   CUSTOMISATION
   -------------
   Every meaningful value lives in the :root block below.
   Change a hex here and it propagates everywhere automatically.
   ============================================================ */


/* ── 1. Variable overrides ─────────────────────────────────── */

:root {

  /* Backgrounds */
  --bg:      #f2f5f9;   /* page background — soft ice blue        */
  --surface: #ffffff;   /* cards, inputs, nav                     */
  --surface2:#e4ecf7;   /* secondary surfaces (e.g. hover state)    */
  --border:  #dce3ef;   /* borders and dividers                   */

  /* Accent colors */
  --accent:  #4a90d9;   /* primary CTA, links, focus rings        */
  --accent2: #e05a30;   /* admin / secondary accent               */
  --accent-dim: #c2d9f5; /* disabled buttons, less prominent accents */
  --danger:  #d94040;   /* errors, destructive actions            */

  /* Text scale */
  --text:    #1a2233;   /* headings, primary text                 */
  --muted:   #788096;   /* labels, secondary text                 */
  /* Keep font stacks as-is — just listed here for reference */
  /* --mono:    'IBM Plex Mono', monospace;                   */
  /* --display: 'Syne', sans-serif;                           */
  /* --radius:  4px;                                          */
}


/* ── 2. Base resets that depend on light context ───────────── */

/* Remove the dark noise texture — unnecessary on a light bg */
body::before {
  display: none;
}

/* Soften the nav bottom line */
nav {
  border-bottom-color: var(--border);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--border);
}

/* Inputs: light background with readable text */
input {
  background: var(--surface);
  color: var(--text);
}

input::placeholder {
  color: #a0a8b8;
}

input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.12);
}


/* ── 3. Card hover — light-mode friendly ──────────────────── */

/* Override the gradient top bar to use opaque accent colors */
.card:hover::before {
  background: linear-gradient(90deg, var(--accent), #6fb3e8);
}

.card.admin-card:hover::before {
  background: linear-gradient(90deg, var(--accent2), var(--danger));
}


/* ── 4. Materia tags — swap neon yellow for haze blue ─────── */

.materia-tag {
  color: #185fa5;                       /* deep sky for readability */
  background: #e8f2fc;                  /* very light blue fill     */
  border-color: #c8dff5;
}


/* ── 5. Admin tag on cards ────────────────────────────────── */

.card-admin-tag {
  color: var(--accent2);
  border-color: var(--accent2);
}


/* ── 6. Login button ─────────────────────────────────────── */

.btn {
  background: var(--accent);
  color: #ffffffe2;                       /* white text instead of #000 */
}

.btn:hover {
  background: #3a7bc8;                  /* slightly darker sky blue   */
  opacity: 1;                           /* cancel the opacity fade    */
}


/* ── 7. Card top accent bar (login card) ─────────────────── */

.card::before {
  background: linear-gradient(90deg, var(--accent), #6fb3e8);
}


/* ── 8. Section labels ───────────────────────────────────── */

.section-label {
  color: #4a90d9;                       /* accent instead of muted   */
}


/* ── 9. Message boxes ────────────────────────────────────── */

.msg.error {
  background: rgba(217, 64, 64, 0.08);
  border-color: var(--danger);
  color: #a32d2d;
}

.msg.success {
  background: rgba(74, 144, 217, 0.10);
  border-color: var(--accent);
  color: #185fa5;
}


/* ── 10. Role badge dot ──────────────────────────────────── */

.role-badge .dot {
  background: var(--accent);
}

.role-badge.admin .dot {
  background: var(--accent2);
}