/* ============================================================
   base.css — Reset, CSS Variables, Typography
   Agrawal Mahila Samiti Vapi Admin Panel
   ============================================================ */

/* ── GOOGLE FONTS ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;500;700&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; background: var(--color-bg); color: var(--color-text); min-height: 100vh; }
a { color: var(--color-primary); text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }

/* ── BRAND VARIABLES ─────────────────────────────────────────── */
:root {
  /* Brand colors — from Agrawal Samiti logo */
  --color-primary:        #7B1A1A;   /* Deep maroon */
  --color-primary-dark:   #5C1212;   /* Darker maroon */
  --color-primary-light:  #F9EDED;   /* Maroon tint */
  --color-gold:           #C9921A;   /* Gold accent */
  --color-gold-light:     #FEF9E7;   /* Gold tint */

  /* Neutral palette */
  --color-bg:             #F2EDE6;   /* Warm cream background */
  --color-surface:        #FFFFFF;   /* Card surface */
  --color-surface-2:      #FAF6F0;   /* Slightly tinted surface */
  --color-border:         #E3D8CC;   /* Border */
  --color-border-light:   #EDE6DC;   /* Lighter border */

  /* Text */
  --color-text:           #1A1A1A;
  --color-text-muted:     #6B6B6B;
  --color-text-faint:     #9B9B9B;
  --color-text-inverse:   #FFFFFF;

  /* Semantic */
  --color-success:        #3B6D11;
  --color-success-bg:     #EAF3DE;
  --color-warning:        #854F0B;
  --color-warning-bg:     #FAEEDA;
  --color-danger:         #A32D2D;
  --color-danger-bg:      #FCEBEB;
  --color-info:           #0C447C;
  --color-info-bg:        #E6F1FB;

  /* Sidebar */
  --sidebar-width:        228px;
  --topbar-height:        52px;
  --addr-bar-height:      28px;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  14px;
  --space-lg:  20px;
  --space-xl:  28px;

  /* Radii */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;

  /* Shadow */
  --shadow-sm:  0 1px 4px rgba(0,0,0,.07);
  --shadow-md:  0 2px 10px rgba(0,0,0,.10);
  --shadow-lg:  0 6px 28px rgba(0,0,0,.13);

  /* Transition */
  --transition: 0.18s ease;
}

/* ── TYPOGRAPHY SCALE ────────────────────────────────────────── */
.text-xs   { font-size: 10px; }
.text-sm   { font-size: 12px; }
.text-base { font-size: 14px; }
.text-md   { font-size: 16px; }
.text-lg   { font-size: 18px; }
.text-xl   { font-size: 22px; }
.text-2xl  { font-size: 26px; }

.font-normal  { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-semi    { font-weight: 600; }
.font-bold    { font-weight: 700; }

.text-primary  { color: var(--color-primary); }
.text-muted    { color: var(--color-text-muted); }
.text-faint    { color: var(--color-text-faint); }
.text-success  { color: var(--color-success); }
.text-warning  { color: var(--color-warning); }
.text-danger   { color: var(--color-danger); }
.text-info     { color: var(--color-info); }
.text-gold     { color: var(--color-gold); }

/* Hindi / Devanagari font helper */
.devanagari,
.hi {
  font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
}

/* ── UTILITY HELPERS ─────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.flex     { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm   { gap: var(--space-sm); }
.gap-md   { gap: var(--space-md); }
.w-full   { width: 100%; }
.mt-sm    { margin-top: var(--space-sm); }
.mt-md    { margin-top: var(--space-md); }
.mb-md    { margin-bottom: var(--space-md); }
.mb-lg    { margin-bottom: var(--space-lg); }

/* Required asterisk */
.req { color: var(--color-danger); margin-left: 2px; }

/* Divider */
.divider { border: none; border-top: 1px solid var(--color-border); margin: var(--space-md) 0; }

/* ── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #bbb; }