/* ===============================
   Vasai Taluka Kabaddi Association
   Global Theme (theme.css) — BASE ONLY
   Colors: Yellow #f7e801, Green #008700
   =============================== */

/* CSS Variables */
:root{
  /* Brand */
  --vk-yellow: #f7e801;
  --vk-green:  #008700;
  --vk-black:  #0b0b0b;
  --vk-white:  #ffffff;

  /* UI */
  --vk-bg:     #fffef2;        /* soft off-white backdrop */
  --vk-text:   #1a1a1a;
  --vk-muted:  #6a6a6a;
  --vk-border: rgba(0,0,0,0.08);
  --vk-ring:   rgba(0,135,0,0.35);

  /* Fonts */
  --font-sans: ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --font-display: "Segoe UI Semibold","SF Pro Display",var(--font-sans);
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 18px rgba(0,0,0,0.10);
  --shadow-lg: 0 14px 32px rgba(0,0,0,0.12);

  /* Z */
  --z-nav:1000; --z-fab:1040; --z-modal:1080;
}

/* Base reset */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
img,video{ max-width:100%; height:auto; display:block; }

/* Body */
body{
  background: var(--vk-bg);
  color: var(--vk-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
}

/* Focus ring */
:where(a,button,input,select,textarea,[tabindex]):focus{
  outline: 3px solid var(--vk-ring);
  outline-offset: 2px;
}

/* Typography scale (use as utility classes) */
.h-hero{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.1rem,3.8vw,3.5rem); line-height:1.05; }
.h-1{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,2.8vw,2.6rem); }
.h-2{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem,2.2vw,2rem); }
.h-3{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.15rem,1.8vw,1.5rem); }
.subtitle{ color:var(--vk-muted); font-weight:600; letter-spacing:.2px; }
.lead{ font-size:1.1rem; color:#2a2a2a; }
.small{ font-size:.9rem; color:var(--vk-muted); }

/* Color utilities */
.text-green{ color: var(--vk-green) !important; }
.text-yellow{ color: var(--vk-yellow) !important; }
.text-muted{ color: var(--vk-muted) !important; }
.bg-green{ background: var(--vk-green) !important; color: var(--vk-white); }
.bg-yellow{ background: var(--vk-yellow) !important; color:#0b0b0b; }
.bg-white{ background:#fff !important; }
.border{ border:1px solid var(--vk-border) !important; }
.border-green{ border:2px solid var(--vk-green) !important; }

/* Layout helpers */
.container{ width:min(1200px,92vw); margin-inline:auto; }
.center{ display:grid; place-items:center; }
.grid{ display:grid; gap: var(--space-4); }
.flex{ display:flex; gap: var(--space-4); }
.hidden{ display:none !important; }

/* Spacing utilities */
.p-4{ padding:var(--space-4); } .p-5{ padding:var(--space-5); } .p-6{ padding:var(--space-6); }
.pt-4{ padding-top:var(--space-4); } .pb-4{ padding-bottom:var(--space-4); }
.mt-4{ margin-top:var(--space-4); } .mb-4{ margin-bottom:var(--space-4); } .my-6{ margin-block:var(--space-6); }

/* Radius + Shadow */
.rounded-sm{ border-radius: var(--radius-sm); }
.rounded-md{ border-radius: var(--radius-md); }
.rounded-lg{ border-radius: var(--radius-lg); }
.shadow-sm{ box-shadow: var(--shadow-sm); }
.shadow-md{ box-shadow: var(--shadow-md); }
.shadow-lg{ box-shadow: var(--shadow-lg); }

/* Buttons (base only; module CSS can extend) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1rem; border-radius: var(--radius-md);
  font-weight:800; letter-spacing:.3px; border:2px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--vk-green); color:var(--vk-white); }
.btn-secondary{ background:var(--vk-yellow); color:#0a0a0a; border-color:rgba(0,0,0,0.1); }
.btn-outline{ background:transparent; color:var(--vk-green); border-color:var(--vk-green); }

/* Forms (base only) */
.input,.select,.textarea{
  width:100%; padding:.75rem .9rem; border-radius:var(--radius-md);
  border:1.5px solid #e9e9e9; background:#fff; font-weight:600;
}
.input:focus,.select:focus,.textarea:focus{
  border-color: var(--vk-green); box-shadow: 0 0 0 4px var(--vk-ring); outline:none;
}

/* Links */
a{ color: var(--vk-green); text-decoration:none; }
a:hover{ text-decoration:underline; }