/* ============================================================
   FILE: styles.css — MarqetDataLabs Shared Stylesheet
   PURPOSE: Single source of truth for design tokens and common
            components shared across all pages. Page-specific
            styles stay in each page's own <style> block.

   LOADING: Each page links this in <head>:
     <link rel="stylesheet" href="/styles.css">

   SCOPE (Standard): CSS variables, fonts, reset, nav/topbar,
     buttons, footer, badges, and the responsive foundation.
   ============================================================ */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ── Design Tokens — COMPLETE set, defined once for every page ── */
:root{
  /* Backgrounds */
  --bg:#050A12;
  --bg2:rgba(13,26,48,0.7);
  --bg3:#0D1A30;
  --inp:rgba(12,24,40,0.9);

  /* Borders */
  --bdr:rgba(34,68,136,0.5);
  --bdr-soft:rgba(34,68,136,0.15);
  --bfoc:rgba(92,176,255,0.6);

  /* Accent + states */
  --acc:#5CB0FF;
  --acch:#79BFFF;
  --grn:#3EE8A8;
  --red:#FF7B7B;
  --amb:#FFD644;
  --prp:#B89EFF;
  --gold:#D4A017;

  /* Text hierarchy */
  --t1:#F0F0F5;
  --t2:#B0B8CC;
  --t3:#6878A0;

  /* Fonts */
  --f:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
  --m:'JetBrains Mono',monospace;

  /* Fluid spacing scale (responsive via clamp) */
  --pad-page:clamp(18px,4vw,32px);
  --radius:12px;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--f);
  background:var(--bg);
  color:var(--t2);
  min-height:100vh;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Shared Nav / Topbar ── */
.mdl-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(5,10,18,.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bdr);
  padding:14px var(--pad-page);
  display:flex;align-items:center;gap:16px;
}
.mdl-logo{
  font-family:var(--m);font-weight:700;
  font-size:clamp(15px,3.5vw,18px);
  color:var(--t1);text-decoration:none;white-space:nowrap;
}
.mdl-logo:hover{text-decoration:none}
.mdl-logo .lm,.mdl-logo .a{color:var(--acc)}
.mdl-logo .lq,.mdl-logo .g{color:var(--grn)}
.mdl-nav-back{
  font-size:13px;color:var(--t3);text-decoration:none;margin-left:auto;
}
.mdl-nav-back:hover{color:var(--acc)}

/* ── Shared Buttons ── */
.mdl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 28px;border-radius:var(--radius);
  font-family:var(--f);font-size:15px;font-weight:700;
  text-decoration:none;cursor:pointer;border:none;
  transition:transform .2s,opacity .2s,border-color .2s,color .2s;
}
.mdl-btn:hover{text-decoration:none}
.mdl-btn-primary{background:var(--grn);color:var(--bg)}
.mdl-btn-primary:hover{transform:translateY(-2px)}
.mdl-btn-accent{background:var(--acc);color:var(--bg)}
.mdl-btn-accent:hover{opacity:.9}
.mdl-btn-pro{background:var(--prp);color:var(--bg)}
.mdl-btn-pro:hover{transform:translateY(-2px)}
.mdl-btn-ghost{background:transparent;color:var(--t1);border:1px solid var(--bdr)}
.mdl-btn-ghost:hover{border-color:var(--acc);color:var(--acc)}

/* ── Shared Badges (tier plaques) ── */
.mdl-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 12px;border-radius:7px;
  font-size:10px;font-weight:700;letter-spacing:.3px;
}
.mdl-badge.free{color:#A8B4C8;border:1px solid rgba(168,180,200,.2)}
.mdl-badge.pro{color:var(--prp);border:1px solid rgba(184,158,255,.2)}
.mdl-badge.admin{color:var(--amb);border:1px solid rgba(255,214,68,.2)}

/* ── Shared Footer ── */
.mdl-footer{
  border-top:1px solid var(--bdr);
  padding:28px var(--pad-page);
  text-align:center;font-size:12px;color:var(--t3);
  max-width:920px;margin:0 auto;line-height:1.8;
}
.mdl-footer a{color:var(--t3);text-decoration:underline}
.mdl-footer a:hover{color:var(--acc)}

/* ── Responsive foundation ── */
/* Tablet / large phone */
@media(max-width:768px){
  .mdl-nav{padding:12px var(--pad-page)}
}
/* Phone */
@media(max-width:480px){
  body{line-height:1.6}
  .mdl-btn{padding:12px 22px;font-size:14px}
  .mdl-nav{gap:10px}
}

/* Respect reduced-motion preferences */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
