@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  --font-base:
    "Century Gothic",
    "Futura",
    "Trebuchet MS",
    "Poppins",
    system-ui,
    -apple-system,
    sans-serif;

  --text-xs: 0.72rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  --clr-primary: #1f2a44;
  --clr-primary-dark: #182037;
  --clr-primary-hover: #2d3b5e;
  --clr-primary-soft: rgba(31, 42, 68, 0.14);
  --clr-primary-xsoft: rgba(31, 42, 68, 0.06);
  --clr-accent: #c6a75e;
  --clr-accent-dark: #a58948;
  --clr-accent-soft: rgba(198, 167, 94, 0.18);
  --color-danger: #c0392b;
  --color-warning: #e67e22;
  --color-success: #27ae60;
  --clr-petrol: #1f2a44;
  --clr-petrol-dark: #182037;
  --clr-petrol-hover: #314163;
  --clr-petrol-soft: rgba(31, 42, 68, 0.14);
  --clr-navy: #1f2a44;
  --clr-navy-dark: #182037;
  --clr-navy-mid: #2d3b5e;
  --clr-navy-subtle: rgba(31, 42, 68, 0.06);
  --clr-aurora-red: rgba(31, 42, 68, 0.28);
  --clr-aurora-blue: rgba(232, 220, 200, 0.16);
  --clr-aurora-red-soft: rgba(31, 42, 68, 0.12);
  --clr-aurora-blue-soft: rgba(232, 220, 200, 0.18);
  --fx-primary-surface:
    radial-gradient(circle at 18% 18%, rgba(232, 220, 200, 0.2), transparent 34%),
    linear-gradient(160deg, #1f2a44 0%, #253453 52%, #182037 100%);
  --fx-primary-surface-strong:
    radial-gradient(circle at 16% 18%, rgba(198, 167, 94, 0.26), transparent 34%),
    linear-gradient(160deg, #182037 0%, #23314d 52%, #12192b 100%);
  --fx-primary-soft:
    linear-gradient(135deg, rgba(31, 42, 68, 0.09) 0%, rgba(232, 220, 200, 0.22) 100%);
  --fx-aurora-surface:
    radial-gradient(circle at 18% 18%, rgba(198, 167, 94, 0.22), transparent 34%),
    radial-gradient(circle at 82% 20%, rgba(232, 220, 200, 0.1), transparent 30%),
    linear-gradient(160deg, #22304d 0%, #1f2a44 44%, #182037 100%);
  --fx-aurora-surface-strong:
    radial-gradient(circle at 16% 18%, rgba(198, 167, 94, 0.28), transparent 34%),
    radial-gradient(circle at 84% 16%, rgba(232, 220, 200, 0.12), transparent 30%),
    linear-gradient(160deg, #243252 0%, #202c47 44%, #172036 100%);
  --fx-aurora-soft:
    linear-gradient(135deg, rgba(232, 220, 200, 0.72) 0%, rgba(31, 42, 68, 0.08) 100%);
  --fx-aurora-soft-alt:
    linear-gradient(135deg, rgba(31, 42, 68, 0.08) 0%, rgba(198, 167, 94, 0.16) 100%);

  --bg-page: #e8dcc8;
  --bg-surface: #f8f3eb;
  --bg-surface-hover: #f2e9dc;
  --bg-input: #f2ebdf;
  --bg-subtle: #efe5d6;
  --bg-sidebar: #1f2a44;
  --bg-sidebar-hover: rgba(255, 255, 255, 0.06);
  --bg-sidebar-active: rgba(255, 255, 255, 0.11);

  --text-primary: #1f2a44;
  --text-secondary: #596074;
  --text-muted: #8a8a8f;
  --text-label: #70717a;
  --text-on-dark: #ffffff;
  --text-on-dark-soft: rgba(255, 255, 255, 0.72);

  --border-light: #dbcdb7;
  --border-mid: #cdb894;
  --border-input: #c4b293;
  --border-focus: var(--clr-petrol);

  --shadow-sm: 0 1px 3px rgba(31, 42, 68, 0.06), 0 8px 24px rgba(31, 42, 68, 0.08);
  --shadow-md: 0 2px 8px rgba(31, 42, 68, 0.08), 0 16px 40px rgba(31, 42, 68, 0.12);
  --shadow-lg: 0 4px 12px rgba(31, 42, 68, 0.12), 0 24px 56px rgba(31, 42, 68, 0.18);
  --shadow-sidebar: 8px 0 28px rgba(24, 32, 55, 0.34);
  --shadow-btn: 0 4px 12px rgba(31, 42, 68, 0.24), 0 10px 26px rgba(24, 32, 55, 0.18);

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 24px;
  --r-full: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.13s cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}