/* ============================================================
   DASHBOARD FONTS
   ============================================================ */

@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Bold.ttf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Semibold.ttf") format("opentype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "SF-Pro-Display";
  src: url("../fonts/SFPRODISPLAYBOLD.OTF") format("opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "SF-Pro-Display";
  src: url("../fonts/SFPRODISPLAYMEDIUM.OTF") format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "SF-Pro-Display";
  src: url("../fonts/SF-Pro-Display-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}

/* ============================================================
   CSS CUSTOM PROPERTIES  (design tokens)
   ============================================================ */

:root {
  --radius: 0.625rem;
  --valtum-page-bg: #0d1016;
  --background: #0d1016;
  --foreground: #f5f5f5;
  --card: #ffffff;
  --card-foreground: #0a0a0a;
  --popover: #141414;
  --popover-foreground: #f5f5f5;
  --primary: #0a0a0a;
  --primaryText: #0a0a0a;
  --secondaryText: #888888;
  --primary-foreground: #f5f5f5;
  --secondary: #141414;
  --secondary-foreground: #f5f5f5;
  --muted: #141414;
  --muted-foreground: #888888;
  --accent: #141414;
  --accent-foreground: #f5f5f5;
  --destructive: #eb2424;
  --border: #222222;
  --input: #222222;
  --ring: #555555;
  --chart-1: #f97316;
  --chart-2: #06b6d4;
  --chart-3: #3b82f6;
  --chart-4: #eab308;
  --chart-5: #f59e0b;
  --sidebar: #0a0a0a;
  --sidebar-foreground: #f5f5f5;
  --sidebar-primary: #f5f5f5;
  --sidebar-primary-foreground: #0a0a0a;
  --sidebar-accent: #141414;
  --sidebar-accent-foreground: #f5f5f5;
  --sidebar-border: #222222;
  --sidebar-ring: #555555;
}

/* ============================================================
   BASE STYLES
   ============================================================ */

html { scroll-behavior: smooth; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-space-grotesk, "Space Grotesk"), sans-serif;
  margin: 0;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}

a  { color: inherit; text-decoration: none; }
video { display: block; }

::selection {
  background: rgba(56, 189, 248, 0.3);
  color: #eff6ff;
}

/* ============================================================
   DASHBOARD UTILITIES
   ============================================================ */

.bg-gradient {
  background-image: radial-gradient(
    387.74% 101.84% at 50.01% 101.84%,
    #b7ccff 1.16%,
    #7da3ff 7.23%,
    #01030a 31.95%
  );
}

.delete-dialog-bg {
  background-image: radial-gradient(
    70.12% 75.43% at 50.15% 100%,
    rgba(235, 36, 36, 0.2) 0%,
    rgba(235, 36, 36, 0) 100%
  );
  mix-blend-mode: multiply;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

::-webkit-scrollbar        { width: 4px; height: 4px; }
::-webkit-scrollbar-track  { background: #fff; }
::-webkit-scrollbar-thumb  { background-color: #52525c; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: #f4f4f5; }

/* ============================================================
   EDITOR.JS
   ============================================================ */

.ce-block,
.ce-toolbar__plus,
.ce-toolbar__settings-btn,
.ce-inline-toolbar,
.codex-editor {
  color: #ffffff !important;
  border-color: #99a1af !important;
}

.ce-toolbar__plus:hover,
.ce-toolbar__settings-btn:hover {
  background-color: #333 !important;
}

.codex-editor__redactor { color: white !important; }