/* ============================================
   Design System — PIDE / RASTA Brand Tokens
   Source of truth: AI/UIUX.md
   Refs: https://pide.org.pk/ | https://rasta.pide.org.pk/
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand — PIDE institutional green */
  --color-primary:         #006B3F;
  --color-primary-dark:    #004D2C;
  --color-primary-darker:  #003820;
  --color-primary-light:   #0A8F52;
  --color-primary-bg:      #E8F5EE;
  --color-primary-border:  #9DCFB5;

  /* Accent — muted gold (sparingly) */
  --color-accent:          #C4A35A;
  --color-accent-bg:       #F8F1E3;
  --color-accent-border:   #E5D4A8;

  /* Semantic */
  --color-success:         #15803D;
  --color-success-bg:      #DCFCE7;
  --color-warning:         #D97706;
  --color-warning-bg:      #FEF3C7;
  --color-danger:          #DC2626;
  --color-danger-bg:       #FEE2E2;
  --color-info:            #0369A1;
  --color-info-bg:         #E0F2FE;

  /* Surfaces */
  --bg-page:               #F5F7F6;
  --bg-card:               #FFFFFF;
  --bg-muted:              #EEF2F0;
  --bg-sidebar:            #0A2E1C;
  --bg-sidebar-hover:      #0F3D27;
  --bg-sidebar-active:     #145232;
  --bg-header:             #FFFFFF;
  --bg-brand:              linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);

  /* Text */
  --text-primary:          #1A2E24;
  --text-secondary:        #475569;
  --text-muted:            #7A8B82;
  --text-inverse:          #FFFFFF;
  --text-sidebar:          #D1FAE5;
  --text-sidebar-muted:    #6EE7A7;

  /* Typography */
  --font-sans:             'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:             'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
  --text-xs:               0.75rem;
  --text-sm:               0.8125rem;
  --text-base:             0.9375rem;
  --text-lg:               1.125rem;
  --text-xl:               1.25rem;
  --text-2xl:              1.5rem;
  --text-3xl:              1.875rem;
  --font-normal:           400;
  --font-medium:           500;
  --font-semibold:         600;
  --font-bold:             700;
  --font-extrabold:        800;
  --leading-tight:         1.25;
  --leading-normal:        1.5;
  --leading-relaxed:       1.625;

  /* Borders & elevation */
  --border:                #DCE5E0;
  --border-strong:         #B8C9BE;
  --shadow-sm:             0 1px 2px rgba(10, 46, 28, 0.06);
  --shadow-md:             0 4px 8px rgba(10, 46, 28, 0.08);
  --shadow-lg:             0 10px 20px rgba(10, 46, 28, 0.10);
  --shadow-xl:             0 16px 32px rgba(10, 46, 28, 0.12);

  /* Spacing */
  --space-1:               0.25rem;
  --space-2:               0.5rem;
  --space-3:               0.75rem;
  --space-4:               1rem;
  --space-5:               1.25rem;
  --space-6:               1.5rem;
  --space-8:               2rem;
  --space-10:              2.5rem;
  --space-12:              3rem;
  --space-16:              4rem;

  /* Radii */
  --radius-sm:             6px;
  --radius-md:             10px;
  --radius-lg:             12px;
  --radius-xl:             16px;
  --radius-pill:           999px;

  /* Layout */
  --sidebar-w:             260px;
  --sidebar-collapsed-w:   0px;
  --header-h:              72px;
  --content-max:           1320px;
  --logo-h:                44px;

  /* Motion */
  --transition-fast:       150ms ease;
  --transition-base:       200ms ease;
  --transition-slow:       300ms ease;

  /* Focus */
  --focus-ring:            0 0 0 3px var(--color-primary-bg);
}

/* Dark mode — same token names */
.dark-mode,
[data-theme="dark"] {
  --color-primary:         #22A35A;
  --color-primary-dark:    #1A8A4A;
  --color-primary-darker:  #14703C;
  --color-primary-light:   #4ADE80;
  --color-primary-bg:      rgba(34, 163, 90, 0.18);
  --color-primary-border:  rgba(34, 163, 90, 0.35);

  --color-accent:          #D4B56A;
  --color-accent-bg:       rgba(212, 181, 106, 0.15);
  --color-accent-border:   rgba(212, 181, 106, 0.3);

  --color-success:         #22C55E;
  --color-success-bg:      rgba(34, 197, 94, 0.15);
  --color-warning:         #FBBF24;
  --color-warning-bg:      rgba(251, 191, 36, 0.15);
  --color-danger:          #EF4444;
  --color-danger-bg:       rgba(239, 68, 68, 0.15);
  --color-info:            #38BDF8;
  --color-info-bg:         rgba(56, 189, 248, 0.15);

  --bg-page:               #0C1612;
  --bg-card:               #14241C;
  --bg-muted:              #1C3228;
  --bg-sidebar:            #071912;
  --bg-sidebar-hover:      #0F2D1F;
  --bg-sidebar-active:     #133A26;
  --bg-header:             #0F1C16;
  --bg-brand:              linear-gradient(135deg, #0A8F52 0%, #006B3F 100%);

  --text-primary:          #E8F0EB;
  --text-secondary:        #A3B8AC;
  --text-muted:            #6B8578;
  --text-inverse:          #FFFFFF;
  --text-sidebar:          #BBF7D0;
  --text-sidebar-muted:    #4ADE80;

  --border:                #243B30;
  --border-strong:         #345043;

  --shadow-sm:             0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md:             0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg:             0 10px 20px rgba(0, 0, 0, 0.5);
  --shadow-xl:             0 16px 32px rgba(0, 0, 0, 0.55);

  --focus-ring:            0 0 0 3px rgba(34, 163, 90, 0.35);
}

*,
*::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-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-page);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-base), color var(--transition-base);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-dark); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-muted);
  color: var(--color-primary-dark);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--color-primary);
  color: var(--text-inverse);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-muted); }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }