@import "./scopiq-fonts.css";

:root {
    color-scheme: light;

    --font-sans: var(--font-instrument-sans);
    --font-serif: var(--font-instrument-sans);

    --brand-navy: #202e47;
    --brand-blue: #0167c6;
    --brand-red: #f12831;
    --brand-white: #ffffff;
    --brand-ink: #02030b;

    --background: #f4f7fb;
    --foreground: #02030b;
    --card: #ffffff;
    --card-foreground: #02030b;
    --popover: #ffffff;
    --popover-foreground: #02030b;
    --primary: #0167c6;
    --primary-foreground: #ffffff;
    --secondary: #e9edf3;
    --secondary-foreground: #202e47;
    --muted: #f4f7fb;
    --muted-foreground: #64748b;
    --accent: #e8f2fc;
    --accent-foreground: #202e47;
    --destructive: #f12831;
    --destructive-foreground: #ffffff;
    --border: #d7dfea;
    --input: #c7d1df;
    --ring: #0167c6;
    --chart-1: #0167c6;
    --chart-2: #0f7a53;
    --chart-3: #a85d00;
    --chart-4: #f12831;
    --chart-5: #5b6ac4;
    --radius: 0.625rem;
    --sidebar-background: #202e47;
    --sidebar-foreground: #ffffff;
    --sidebar-primary: #0167c6;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #2d405f;
    --sidebar-accent-foreground: #ffffff;
    --sidebar-border: #3a4a66;
    --sidebar-ring: #5aa7ef;
    --sidebar: #202e47;
}

.dark,
[data-theme="dark"] {
    color-scheme: dark;

    --background: #02030b;
    --foreground: #f4f7fb;
    --card: #0d1421;
    --card-foreground: #f4f7fb;
    --popover: #111a2a;
    --popover-foreground: #f4f7fb;
    --primary: #2b83d5;
    --primary-foreground: #ffffff;
    --secondary: #18243a;
    --secondary-foreground: #f4f7fb;
    --muted: #141f33;
    --muted-foreground: #a6b3c6;
    --accent: #1a3152;
    --accent-foreground: #ffffff;
    --destructive: #f12831;
    --destructive-foreground: #ffffff;
    --border: #25334a;
    --input: #2f405b;
    --ring: #4f9fe8;
    --chart-1: #4f9fe8;
    --chart-2: #32b483;
    --chart-3: #d69834;
    --chart-4: #f35d64;
    --chart-5: #8793e6;
    --sidebar-background: #111b2d;
    --sidebar-foreground: #f4f7fb;
    --sidebar-primary: #2b83d5;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #1a3152;
    --sidebar-accent-foreground: #ffffff;
    --sidebar-border: #2a3b57;
    --sidebar-ring: #4f9fe8;
    --sidebar: #111b2d;
}

html {
    font-family: var(--font-sans);
}

body {
    margin: 0;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
}