/* ============================================================
   base.css — Reset · CSS Variables · Typography
   GovDoc Vault | Government Document Portal
   ============================================================ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Colors */
  --color-primary:         #1A3A5C;
  --color-primary-dark:    #0F2540;
  --color-primary-light:   #2352800D;  /* 5% primary for subtle bg */
  --color-accent:          #C8A214;
  --color-accent-dark:     #A07F0B;
  --color-accent-light:    #C8A21420;

  --color-success:         #2E7D32;
  --color-success-light:   #2E7D3215;
  --color-danger:          #C62828;
  --color-danger-light:    #C6282815;
  --color-warning:         #F57F17;
  --color-warning-light:   #F57F1715;
  --color-info:            #1565C0;
  --color-info-light:      #1565C015;

  --color-bg:              #F4F6F9;
  --color-surface:         #FFFFFF;
  --color-surface-raised:  #FAFBFC;
  --color-border:          #D0D7E0;
  --color-border-strong:   #B0BAC8;

  --color-text-primary:    #1C1C1E;
  --color-text-secondary:  #4A5568;
  --color-text-muted:      #8A96A3;
  --color-text-inverse:    #FFFFFF;

  /* Sidebar */
  --sidebar-bg:            #0F2540;
  --sidebar-text:          #C8D4E3;
  --sidebar-text-active:   #FFFFFF;
  --sidebar-active-bg:     rgba(255,255,255,0.08);
  --sidebar-hover-bg:      rgba(255,255,255,0.05);
  --sidebar-border:        rgba(255,255,255,0.08);
  --sidebar-width:         248px;

  /* National bar */
  --national-bar-bg:       #1A3A5C;
  --national-bar-text:     rgba(255,255,255,0.85);

  /* Typography */
  --font-base:             'Noto Sans', system-ui, -apple-system, sans-serif;
  --font-mono:             'Noto Sans Mono', 'Courier New', monospace;

  --text-xs:               0.6875rem;   /* 11px */
  --text-sm:               0.8125rem;   /* 13px */
  --text-base:             0.9375rem;   /* 15px */
  --text-md:               1.0625rem;   /* 17px */
  --text-lg:               1.25rem;     /* 20px */
  --text-xl:               1.5rem;      /* 24px */
  --text-2xl:              1.875rem;    /* 30px */

  --weight-regular:        400;
  --weight-medium:         500;
  --weight-semibold:       600;
  --weight-bold:           700;

  --leading-tight:         1.25;
  --leading-normal:        1.5;
  --leading-relaxed:       1.65;

  /* Spacing — 8px grid */
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */

  /* Borders & Radius */
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    8px;
  --radius-full:  9999px;

  --border-width:    1px;
  --border-style:    solid;
  --border-color:    var(--color-border);

  /* Shadows — minimal, no decorative shadows */
  --shadow-card:    0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-modal:   0 8px 32px rgba(0,0,0,0.18);
  --shadow-topbar:  0 1px 0 var(--color-border);

  /* Transitions */
  --transition-fast:    100ms ease;
  --transition-base:    200ms ease;

  /* Layout */
  --max-width:          1100px;
  --topbar-height:      58px;
  --national-bar-height: 32px;
}


/* ── HIDDEN ATTRIBUTE — prevents modal-overlay flash on load ─ */
[hidden] { display: none !important; }
/* ── 2. RESET ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}
table { border-collapse: collapse; width: 100%; }

/* ── 3. FOCUS ─────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ── 4. SELECTION ─────────────────────────────────────────── */
::selection {
  background-color: var(--color-accent-light);
  color: var(--color-primary-dark);
}

/* ── 5. SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }