@font-face {
  font-family: "Nunito";
  src: url("../../vendor/fonts/nunito-var.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../../vendor/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../../vendor/fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../../vendor/fonts/poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../../vendor/fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../../vendor/fonts/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;

  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-body);

  --accent: #7c3aed;
  --on-accent: #fff;
  --accent-text: var(--accent);
  --accent-hover: color-mix(in srgb, var(--accent) 84%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 11%, var(--surface));
  --accent-soft-strong: color-mix(in srgb, var(--accent) 20%, var(--surface));
  --accent-ring: color-mix(in srgb, var(--accent) 32%, transparent);

  --bg: #f7f5ff;
  --bg-image: none;
  --surface: #fff;
  --surface-2: #f3f1fb;
  --surface-3: #e9e5f6;
  --border: #e5e0f3;
  --border-strong: #cfc8e6;
  --text: #1f1b2e;
  --text-muted: #5b5670;
  --text-faint: #8b86a0;
  --header-bg: var(--surface);
  --sidebar-bg: var(--surface);
  --brand-gradient: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #ec4899));
  --hero-gradient: radial-gradient(60rem 40rem at 85% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(50rem 30rem at -10% 20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);

  --success: #15803d;
  --success-soft: #dcfce7;
  --warning: #a16207;
  --warning-soft: #fef3c7;
  --danger: #b91c1c;
  --danger-soft: #fee2e2;
  --info: #0369a1;
  --info-soft: #e0f2fe;

  --shadow-sm: 0 .1rem .2rem rgb(31 27 46 / .06), 0 .1rem .3rem rgb(31 27 46 / .05);
  --shadow-md: 0 .4rem 1.2rem rgb(31 27 46 / .08), 0 .1rem .3rem rgb(31 27 46 / .05);
  --shadow-lg: 0 1.6rem 4rem rgb(31 27 46 / .14), 0 .4rem 1.2rem rgb(31 27 46 / .06);

  --radius-sm: .6rem;
  --radius-md: 1rem;
  --radius-lg: 1.6rem;
  --radius-xl: 2.4rem;
  --radius-pill: 99.9rem;

  --space-1: .4rem;
  --space-2: .8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2.4rem;
  --space-6: 3.2rem;
  --space-7: 4.8rem;
  --space-8: 6.4rem;
  --space-9: 9.6rem;

  --fs-xs: 1.2rem;
  --fs-sm: 1.4rem;
  --fs-md: 1.6rem;
  --fs-lg: 1.8rem;
  --fs-xl: 2.2rem;
  --fs-2xl: 2.8rem;
  --fs-3xl: 3.6rem;
  --fs-4xl: clamp(3.4rem, 5vw + 1rem, 5.6rem);

  --z-header: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --transition: .18s var(--ease);

  --header-h: 6.4rem;
  --sidebar-w: 27rem;
  --content-max: 128rem;
  --control-h: 4.6rem;
}

[data-accent="blue"] { --accent: #2563eb; }
[data-accent="green"] { --accent: #15803d; }
[data-accent="orange"] { --accent: #c2410c; }
[data-accent="rose"] { --accent: #be123c; }

[data-mode="dark"] {
  color-scheme: dark;

  --accent-text: color-mix(in srgb, var(--accent) 55%, #fff);

  --bg: #12101c;
  --surface: #1b1829;
  --surface-2: #231f35;
  --surface-3: #2d2845;
  --border: #322d4a;
  --border-strong: #463f66;
  --text: #f1eefb;
  --text-muted: #b6b0cf;
  --text-faint: #8a84a6;

  --success: #4ade80;
  --success-soft: #11301f;
  --warning: #facc15;
  --warning-soft: #33290a;
  --danger: #f87171;
  --danger-soft: #3a1618;
  --info: #38bdf8;
  --info-soft: #0c2a3b;

  --shadow-sm: 0 .1rem .2rem rgb(0 0 0 / .4);
  --shadow-md: 0 .4rem 1.2rem rgb(0 0 0 / .45);
  --shadow-lg: 0 1.6rem 4rem rgb(0 0 0 / .55);
}