/* Global Design System for Mesolaws Info */
:root{
  /* Colors */
  --color-primary:#1a365d; /* deep navy */
  --color-secondary:#2b6cb0; /* royal blue */
  --color-accent:#4299e1; /* sky blue */
  --color-dark:#1a202c; /* gray-900 */
  --color-muted:#4a5568; /* gray-600 */
  --color-border:#e2e8f0; /* gray-200 */
  --color-bg:#f7fafc; /* gray-50 */
  --color-success:#48bb78;
  --color-warning:#ed8936;
  --color-danger:#e53e3e;

  /* Typography */
  --font-sans:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  --font-serif:'Playfair Display',Georgia,serif;
  --fs-xs:.8125rem; /*13*/
  --fs-sm:.875rem;  /*14*/
  --fs-md:1rem;     /*16*/
  --fs-lg:1.125rem; /*18*/
  --fs-xl:1.25rem;  /*20*/
  --lh:1.6;

  /* Radius & Shadows */
  --radius-sm:10px;
  --radius-md:12px;
  --radius-lg:18px;
  --shadow-card:0 8px 24px rgba(0,0,0,.06);
  --shadow-hover:0 12px 32px rgba(0,0,0,.10);

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem;
}

@media (prefers-color-scheme: dark){
  :root{
    --color-bg:#0b1220;
    --color-dark:#e5e7eb;
    --color-border:#1f2a44;
    --color-muted:#94a3b8;
  }
}

html,body{scroll-behavior:smooth}
body{font-family:var(--font-sans);line-height:var(--lh);background:var(--color-bg);color:var(--color-dark)}

/* Focus styles */
*:focus{outline:none}
:focus-visible{box-shadow:0 0 0 3px rgba(66,153,225,.35);border-radius:8px}

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/**************** Components ****************/
.container{max-width:1200px;margin:0 auto}

.brand-gradient{background:linear-gradient(135deg,var(--color-secondary),var(--color-accent));}
.text-gradient{background:linear-gradient(135deg,var(--color-secondary),var(--color-accent));-webkit-background-clip:text;background-clip:text;color:transparent}

.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:9999px;padding:.75rem 1.25rem;font-weight:600;transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--color-accent);color:#fff;box-shadow:var(--shadow-card)}
.btn-primary:hover{background:var(--color-secondary);box-shadow:var(--shadow-hover);transform:translateY(-1px)}
.btn-outline{border:1px solid var(--color-border);color:var(--color-dark);background:#fff}
.btn-outline:hover{border-color:var(--color-secondary);color:var(--color-secondary);box-shadow:var(--shadow-card)}
.btn-ghost{background:transparent;color:var(--color-dark)}

.badge{padding:.35rem .6rem;border-radius:9999px;font-size:.75rem;font-weight:600}
.badge-success{background:rgba(72,187,120,.1);color:#2f855a}
.badge-warning{background:rgba(237,137,54,.12);color:#c05621}
.badge-info{background:rgba(66,153,225,.12);color:#2b6cb0}

.card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);}
.card-hover{transition:transform .2s ease, box-shadow .2s ease}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}

.section{padding:4rem 1rem}
.section-sm{padding:2rem 1rem}
.section-title{font-weight:800;letter-spacing:-.02em}
.section-subtitle{color:var(--color-muted)}

.table-pro{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}
.table-pro th{background:#f8fafc;color:#334155;text-align:left;font-weight:700}
.table-pro th,.table-pro td{padding:14px 16px;border-bottom:1px solid var(--color-border)}
.table-pro tr:last-child td{border-bottom:none}
.table-pro tr:hover td{background:#f9fbff}

/* Forms */
.input{width:100%;border:1px solid var(--color-border);border-radius:10px;padding:.75rem 1rem;outline:none;transition:all .2s ease;background:#fff}
.input:focus{border-color:var(--color-accent);box-shadow:0 0 0 4px rgba(66,153,225,.12)}
.label{font-weight:600;color:#374151;margin-bottom:.35rem;display:block}
.help{font-size:.8rem;color:#6b7280}

/* Hero */
.hero{background:linear-gradient(180deg,#ffffff, #f8fbff);} 
.hero-blob{position:absolute;inset:-20% auto auto -10%;width:420px;height:420px;background:radial-gradient(60% 60% at 50% 50%,rgba(66,153,225,.25),rgba(66,153,225,0));filter:blur(10px);} 

/* Header elevation on scroll */
.is-scrolled{box-shadow:0 8px 24px rgba(0,0,0,.08)!important}

/* Admin Layout */
.admin-wrap{display:grid;grid-template-columns:260px 1fr;min-height:100vh;background:#f5f7fb}
.admin-sidebar{background:#0f172a;color:#e2e8f0;position:sticky;top:0;height:100vh;padding:1rem}
.admin-nav a{display:flex;align-items:center;gap:.75rem;color:#cbd5e1;padding:.6rem .8rem;border-radius:10px;margin:.15rem 0;transition:.2s}
.admin-nav a:hover,.admin-nav a.active{background:#1e293b;color:#fff}
.admin-topbar{background:#ffffff;border-bottom:1px solid var(--color-border);padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10}
.admin-content{padding:1.25rem}

/* Utilities */
.shadow-card{box-shadow:var(--shadow-card)}
.rounded-lg{border-radius:var(--radius-lg)}
.rounded-md{border-radius:var(--radius-md)}
.rounded-sm{border-radius:var(--radius-sm)}
.border{border:1px solid var(--color-border)}
.bg-white{background:#fff}
.text-muted{color:var(--color-muted)}