/* public/assets/css/variables.css - EduSBA design system tokens */

:root {
  /* Brand colors */
  --primary-color: #0f172a;
  --primary-hover: #0c1424;
  --accent-color: #0fbf82;
  --accent-hover: #0ba66f;
  --accent-soft: #eafdf5;
  --brand-gradient-start: var(--accent-color);
  --brand-gradient-mid: var(--accent-hover);
  --brand-gradient-end: var(--primary-color);
  --brand-hero-shadow: #0fbf8240;
  --secondary-color: #475569;
  --muted-color: #94a3b8;

  /* Semantic colors */
  --success-color: #10b981;
  --success-bg: #d1fae5;
  --success-border: #a7f3d0;
  --success-text: #065f46;
  --warning-color: #fbbf24;
  --warning-bg: #fef3c7;
  --warning-border: #fde68a;
  --warning-text: #92400e;
  --danger-color: #f87171;
  --danger-bg: #fee2e2;
  --danger-border: #fecaca;
  --danger-text: #991b1b;
  --info-color: #0fbf82;
  --info-bg: #eafdf5;
  --info-border: #bbf7d0;
  --info-text: #064e3b;

  /* Surfaces */
  --bg-main: #f8fafc;
  --bg-subtle: #f1f5f9;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --border-color: #e2e8f0;
  --border-strong: #cbd5e1;
  --focus-ring: rgba(15, 191, 130, 0.18);
  --input-bg: #ffffff;
  --input-border: #cbd5e1;

  /* Typography colors */
  --text-heading: #0f172a;
  --text-body: #1e293b;
  --text-muted: #475569;
  --text-link: #0fbf82;
  --placeholder-color: #94a3b8;

  /* Sidebar / nav — dark navy flowing into deep forest green */
  --sidebar-bg: linear-gradient(
    180deg,
    #0a1020 0%,
    #0f172a 22%,
    #0c3329 48%,
    #064e3b 78%,
    #043d2f 100%
  );
  --sidebar-text: #bbf7d0;
  --sidebar-text-muted: #34d399;
  --sidebar-active-bg: #059669;
  --sidebar-active-text: #ecfdf5;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.07);

  /* Portal chrome — shared footer + top bar (navy → forest green, gold + mint text) */
  --portal-chrome-bg: linear-gradient(135deg, #0f172a 0%, #064e3b 55%, #043d2f 100%);
  --portal-chrome-border: rgba(187, 247, 208, 0.14);
  --portal-chrome-title: #fde68a;
  --portal-chrome-text: rgba(187, 247, 208, 0.92);
  --portal-chrome-muted: rgba(187, 247, 208, 0.65);
  --portal-chrome-sep: rgba(187, 247, 208, 0.38);
  --portal-chrome-surface: rgba(255, 255, 255, 0.08);
  --portal-chrome-surface-hover: rgba(255, 255, 255, 0.14);

  --topbar-bg: var(--portal-chrome-bg);
  --topbar-border: var(--accent-color);
  --topbar-text: var(--portal-chrome-text);
  --topbar-text-muted: var(--portal-chrome-muted);
  --nav-blur: rgba(255, 255, 255, 0.88);

  /* Typography scale */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', var(--font-sans);
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  /* 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;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-nav: 0 -4px 24px rgba(15, 23, 42, 0.06);

  /* Motion */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-spring: 0.32s cubic-bezier(0.34, 1.2, 0.64, 1);

  /* Z-index scale */
  --z-base: 1;
  --z-sticky: 90;
  --z-nav: 100;
  --z-drawer: 1100;
  --z-backdrop: 1050;
  --z-modal: 1200;
  --z-toast: 1300;

  /* Layout */
  --sidebar-width: 268px;
  --bottom-nav-height: 68px;
  --content-max: 1280px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}