/* Keppler Standard Fonts */

/* ========================================
   Inter Font Family
   ======================================== */
:root {
    /* ---- Base Colors ---- */
    --ks-color-white: #FFFFFF;
    --ks-color-black: #000000;
    --ks-color-transparent: transparent;

    /* ---- Blue Palette ---- */
    --ks-color-primary: #1657E6;
    --ks-color-blue: #1657E6;
    --ks-color-blue-50: #E5F0FA;
    --ks-color-blue-100: #CCE0F5;
    --ks-color-blue-200: #99C2EB;
    --ks-color-blue-300: #66A3E0;
    --ks-color-blue-400: #3385D6;
    --ks-color-blue-500: #0066CC;
    --ks-color-blue-600: #0052A3;
    --ks-color-blue-700: #003D7A;
    --ks-color-blue-800: #002952;
    --ks-color-blue-900: #001429;
    --ks-color-blue-light: #4E7EF0;
    --ks-color-blue-dark: #0D3A9F;
    --ks-color-blue-very-dark: #0D3D99;
    --ks-color-blue-accent: #5B9EFF;

    /* ---- Green Palette ---- */
    --ks-color-green: #28A745;
    --ks-color-green-50: #E8F5EC;
    --ks-color-green-100: #D1EBD9;
    --ks-color-green-200: #A3D7B3;
    --ks-color-green-300: #74C38D;
    --ks-color-green-400: #46AF67;
    --ks-color-green-500: #28A745;
    --ks-color-green-600: #218838;
    --ks-color-green-700: #1E7E34;
    --ks-color-green-800: #155724;

    /* ---- Grey Palette ---- */
    --ks-color-neutral: #908E8F;
    --ks-color-grey: #908E8F;
    --ks-color-grey-50: #FAFAFA;
    --ks-color-grey-100: #F5F5F5;
    --ks-color-grey-200: #E0E0E0;
    --ks-color-grey-300: #C2C1C1;
    --ks-color-grey-400: #A9A8A8;
    --ks-color-grey-500: #908E8F;
    --ks-color-grey-600: #6E6D6D;
    --ks-color-grey-700: #4F4E4F;
    --ks-color-grey-800: #323232;
    --ks-color-grey-900: #1F1F1F;

    /* ---- Yellow Palette ---- */
    --ks-color-accent: #E7C22F;
    --ks-color-yellow: #E7C22F;
    --ks-color-yellow-light: #FFF176;
    --ks-color-yellow-dark: #C79100;

    /* ---- Semantic Colors ---- */
    --ks-color-error: #FF0000;
    --ks-color-success: #28A745;
    --ks-color-warning: #FFC107;
    --ks-color-info: #17A2B8;

    /* ---- Tertiary Colors ---- */
    --ks-color-tertiary-light: #CCCCCC;
    --ks-color-tertiary-dark: #555555;

    /* ---- Background Colors ---- */
    --ks-color-bg-light: #F9F9F9;
    --ks-color-bg-dark: #1E1E1E;

    /* ---- Card Colors ---- */
    --ks-color-card-light: rgba(255, 255, 255, 0.12);
    --ks-color-card-dark: #2A2A2A;
    --ks-color-card-header-light: #F5F5F5;
    --ks-color-card-header-dark: #333333;

    /* ---- Text Colors (Light Theme) ---- */
    --ks-color-text-primary: #333333;
    --ks-color-text-secondary: #555555;
    --ks-color-text-tertiary: #666666;
    --ks-color-text-muted: #999999;
    --ks-color-text-placeholder: #BBBBBB;

    /* ---- Text Colors (Dark Theme) ---- */
    --ks-color-text-primary-dark: #EEEEEE;
    --ks-color-text-secondary-dark: #DDDDDD;
    --ks-color-text-tertiary-dark: #CCCCCC;
    --ks-color-text-muted-dark: #666666;
    --ks-color-text-placeholder-dark: #555555;

    /* ---- Border Colors ---- */
    --ks-color-border-light: #E0E0E0;
    --ks-color-border-dark: #444444;
    --ks-color-divider: #E0E0E0;

    /* ---- Badge Colors ---- */
    --ks-color-badge-bg: #E8F0FE;
    --ks-color-badge-bg-dark: #1A3A5C;

    /* ---- Selection Colors ---- */
    --ks-color-selection: #6BB4F0;
    --ks-color-selection-hover: #52A3E0;

    /* ---- Legacy Colors ---- */
    --ks-color-red: #FF0000;
    --ks-color-gray-100: #F5F5F5;
    --ks-color-gray-200: #E0E0E0;

    /* ---- Font Settings ---- */
    --ks-font-family-primary: "Inter", Arial, Helvetica, sans-serif;
    --ks-font-size-base: 14px;
}

/* Inter Thin */
@font-face {
    font-family: "Inter";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/Inter_18pt-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* Inter Extra Light */
@font-face {
    font-family: "Inter";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/Inter_18pt-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* Inter Light */
@font-face {
    font-family: "Inter";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/Inter_18pt-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Inter Regular */
@font-face {
    font-family: "Inter";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/Inter_18pt-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Inter Medium */
@font-face {
    font-family: "Inter";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/Inter_18pt-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Inter Semi Bold */
@font-face {
    font-family: "Inter";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/Inter_18pt-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Inter Bold */
@font-face {
    font-family: "Inter";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/Inter_18pt-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Inter Extra Bold */
@font-face {
    font-family: "Inter";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/Inter_18pt-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Inter Black */
@font-face {
    font-family: "Inter";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/Inter_18pt-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   Space Mono Font Family
   ======================================== */

/* Space Mono Regular */
@font-face {
    font-family: "Space Mono";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/SpaceMono-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Space Mono Italic */
@font-face {
    font-family: "Space Mono";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/SpaceMono-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Space Mono Bold */
@font-face {
    font-family: "Space Mono";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/SpaceMono-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Space Mono Bold Italic */
@font-face {
    font-family: "Space Mono";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/SpaceMono-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ========================================
   Noto Sans Font Family
   ======================================== */

/* Noto Sans Thin */
@font-face {
    font-family: "Noto Sans";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/NotoSans-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* Noto Sans Extra Light */
@font-face {
    font-family: "Noto Sans";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/NotoSans-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* Noto Sans Light */
@font-face {
    font-family: "Noto Sans";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/NotoSans-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Noto Sans Regular */
@font-face {
    font-family: "Noto Sans";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/NotoSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Noto Sans Medium */
@font-face {
    font-family: "Noto Sans";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/NotoSans-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Noto Sans Semi Bold */
@font-face {
    font-family: "Noto Sans";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/NotoSans-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Noto Sans Bold */
@font-face {
    font-family: "Noto Sans";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/NotoSans-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Noto Sans Extra Bold */
@font-face {
    font-family: "Noto Sans";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/NotoSans-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Noto Sans Black */
@font-face {
    font-family: "Noto Sans";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/NotoSans-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   Fluent System Icons Font Family
   ======================================== */

/* Fluent System Icons Regular */
@font-face {
    font-family: "Fluent System Icons";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/FluentSystemIcons-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Fluent System Icons Filled */
@font-face {
    font-family: "Fluent System Icons";
    src: url("/_content/Keppler.Visual.Standard.Blazor/fonts/FluentSystemIcons-Filled.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html, body {
    font-family: var(--ks-font-family-primary);
    font-size: var(--ks-font-size-base);
    color: var(--ks-color-neutral);
}

.ks-headline {
    color: var(--ks-color-primary);
    font-weight: 700;
}