/* public/css/brand.css
 *
 * Shared design tokens and components for the entire IRRanks platform.
 * Both index.html (public homepage) and stint-planner.html (admin
 * dashboard) link to this file. Change a color or a shared component
 * ONCE here - it updates everywhere automatically.
 *
 * Page-specific layout (hero sections, the stint ladder, feature grids,
 * etc.) stays in each page's own <style> block. Only things that are
 * genuinely shared between pages belong in this file.
 */

:root{
  /* --- Core palette (from the IRRanks logo spec) --- */
  --bg:#000000;
  --panel:#0A0D12;
  --panel-raised:#10141B;
  --border:#181F28;

  /* --- Text --- */
  --text:#E8ECEF;       /* body copy, paragraphs - easiest to read */
  --silver:#E0E0E0;     /* exact wordmark "Ranks" color, per brand spec */
  --muted:#7C8894;      /* secondary/dim text, labels, helper copy */

  /* --- Accent (electric blue) --- */
  --accent:#3B7FE8;
  --accent-bright:#5C96EE;
  --accent-deep:#132A4D;
  --accent-glow:rgba(59,127,232,.6);

  /* --- Status colors --- */
  --open:#35C46B;
  --tentative:#F5D142;
  --blocked:#FF5C5C;

  /* --- Shape --- */
  --radius:4px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;}
::selection{background:var(--accent);color:#000000;}
a{color:inherit;}

.display{font-family:'Rajdhani',sans-serif;text-transform:uppercase;letter-spacing:.04em;}
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;}

/* --- Wordmark (used in every header/footer across the platform) --- */
.wordmark{display:flex;align-items:center;gap:22px;}
.wordmark img{height:40px;width:auto;display:block;
  filter:drop-shadow(0 0 10px rgba(59,127,232,.35));}
.wordmark .sub{font-family:'Inter',sans-serif;font-weight:500;font-style:normal;font-size:13px;
  letter-spacing:.03em;text-transform:none;color:var(--muted);
  border-left:1px solid var(--border);padding-left:18px;}

/* --- Site header (shared across every page - same padding, same logo
   size, same background everywhere) --- */
header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 28px;
  background:rgba(0,0,0,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
header .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;}
header .wordmark img{height:56px;}

/* --- Panels --- */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;
  box-shadow:0 0 0 1px rgba(59,127,232,.04) inset;}
.panel h2{
  font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:700;font-style:italic;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-bright);margin:0 0 16px;
  display:flex;align-items:center;gap:8px;
}
.panel h2::before{content:'';width:3px;height:14px;background:var(--accent);display:inline-block;
  box-shadow:0 0 8px var(--accent-glow);}

/* --- Form fields --- */
label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em;}
.field{margin-bottom:14px;}
input, select{
  width:100%;background:var(--panel-raised);border:1px solid var(--border);color:var(--text);
  padding:9px 10px;border-radius:var(--radius);font-family:'JetBrains Mono',monospace;font-size:13px;
}
input:focus, select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* --- Buttons --- */
.btn, button.btn, a.btn-primary, a.btn-ghost{
  background:var(--accent);color:#ffffff;border:none;font-family:'Rajdhani',sans-serif;
  font-weight:700;font-style:italic;letter-spacing:.05em;text-transform:uppercase;font-size:14px;
  padding:11px 20px;border-radius:var(--radius);cursor:pointer;transition:.15s;
  box-shadow:0 0 18px var(--accent-glow);display:inline-block;text-decoration:none;
}
.btn:hover, button.btn:hover, a.btn-primary:hover{filter:brightness(1.15);box-shadow:0 0 26px var(--accent-glow);}
.btn.ghost, button.btn.ghost, a.btn-ghost{
  background:transparent;color:var(--text);border:1px solid var(--border);box-shadow:none;
}
.btn.ghost:hover, button.btn.ghost:hover, a.btn-ghost:hover{border-color:var(--accent);color:var(--accent-bright);}
button.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;}

/* --- Badges --- */
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;}
.badge.ok{background:rgba(53,196,107,.15);color:var(--open);}
.badge.warn{background:rgba(245,209,66,.15);color:var(--tentative);}

/* --- Misc shared utility --- */
.helper{font-size:12px;color:var(--muted);line-height:1.5;margin-top:8px;}
.helper a{color:var(--accent);}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center;}
.empty{color:var(--muted);font-size:13px;padding:24px 0;text-align:center;}