/* ===== GenZMaths base styles (lightweight utility + prose) ===== */

/* Optional custom font (comment out if /static/Inter-Variable.woff2 not present) */
@font-face{
    font-family: "Inter var";
    src: url("/static/Inter-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  
  :root{
    --ink:#0f172a;          /* slate-900 */
    --muted:#475569;        /* slate-600 */
    --line:#e5e7eb;         /* gray-200 */
    --brand:#6366f1;        /* indigo-500 */
    --brand-600:#4f46e5;    /* indigo-600 */
    --surface:#ffffff;
    --radius:1rem;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  html{
    -webkit-text-size-adjust:100%;
    font-family: "Inter var", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
  body{
    margin:0;
    color:var(--ink);
    background:var(--surface);
    line-height:1.55;
  }
  
  /* Links & buttons */
  a{color:var(--brand); text-decoration:none}
  a:hover{text-decoration:underline}
  .button{
    display:inline-flex; align-items:center; justify-content:center;
    gap:.5rem; padding:.75rem 1rem; border-radius:.75rem;
    background:var(--brand); color:#fff; font-weight:600; border:0;
  }
  .button:hover{background:var(--brand-600)}
  
  /* Layout bits */
  .container{max-width:72rem; margin:0 auto; padding:1rem}
  .header,.footer{border-bottom:1px solid var(--line)}
  .footer{border-top:1px solid var(--line); color:var(--muted)}
  .nav a{padding:.5rem .75rem}
  
  /* Cards & grids */
  .card{border:1px solid var(--line); border-radius:var(--radius); padding:1rem}
  .grid{display:grid; gap:1rem}
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  @media (max-width: 960px){ .grid-2,.grid-3{grid-template-columns:1fr} }
  
  /* Headings */
  h1{font-size:1.875rem; line-height:1.2; margin:.25rem 0 1rem; font-weight:800}
  h2{font-size:1.25rem; line-height:1.3; margin:1.5rem 0 .5rem; font-weight:700}
  h3{font-size:1.05rem; line-height:1.3; margin:1rem 0 .25rem; font-weight:700}
  
  /* Breadcrumb */
  .breadcrumb{color:var(--muted); font-size:.9rem; margin:.5rem 0 1rem}
  .breadcrumb a{color:inherit}
  
  /* Prose defaults */
  .prose p{margin:.5rem 0 1rem}
  .prose ul{padding-left:1.25rem; margin:.25rem 0 1rem}
  .prose ol{padding-left:1.5rem; margin:.25rem 0 1rem}
  .prose li{margin:.25rem 0}
  .prose code, code{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    background:#f8fafc; border:1px solid #e2e8f0; border-radius:.375rem; padding:.05rem .35rem;
  }
  .prose pre{
    background:#0b1020; color:#e2e8f0; padding:1rem; border-radius:.75rem; overflow:auto;
  }
  
  /* Images */
  img{max-width:100%; height:auto; display:block}
  img.round{border-radius:.75rem}
  .logo{width:32px; height:32px}
  
  /* Helpers */
  .mt-0{margin-top:0}.mb-0{margin-bottom:0}
  .mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}
  .mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}
  .mt-3{margin-top:.75rem}.mb-3{margin-bottom:.75rem}
  .mt-4{margin-top:1rem}.mb-4{margin-bottom:1rem}
  .p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}
  .round{border-radius:var(--radius)}
  .border{border:1px solid var(--line)}
  .text-muted{color:var(--muted)}
  .text-center{text-align:center}
  .hidden{display:none}
  
  /* Header layout example (non-invasive—matches your HTML) */
  .site-header{
    display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:1rem 0;
  }
  .site-brand{display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.125rem}
  .site-nav a{font-size:.95rem}
  
  /* Buttons variants */
  .btn{comp: initial}
  .btn-primary{comp: initial}
  .btn-primary{ background:var(--brand); color:#fff; border-radius:.75rem; padding:.6rem 1rem; font-weight:600; border:0}
  .btn-primary:hover{ background:var(--brand-600) }
  .btn-outline{ background:#fff; color:var(--brand); border:1px solid var(--brand); border-radius:.75rem; padding:.6rem 1rem; font-weight:600 }
  .btn-outline:hover{ background:#eef2ff }
  
  /* Tables (if any) */
  table{border-collapse:collapse; width:100%; font-size:.95rem}
  th,td{border:1px solid var(--line); padding:.5rem .6rem; text-align:left}
  th{background:#f8fafc; font-weight:700}
  
  /* Forms (if any) */
  input,select,button,textarea{
    font:inherit; border:1px solid var(--line); border-radius:.5rem; padding:.55rem .65rem; background:#fff;
  }
  input:focus,select:focus,textarea:focus{outline:2px solid #c7d2fe; border-color:#c7d2fe}
  
  /* Footer */
  .site-footer{color:var(--muted); padding:1rem 0; border-top:1px solid var(--line)}