/*
 * Copyright (C) 2024-2025 BIRU
 *
 * This file is part of Tenzu.
 *
 * Tenzu is free software: you can redistribute it and/or modify it
 * under the terms of the GNU Affero General Public License as published
 * by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 * See the GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see <https://www.gnu.org/licenses/>.
 *
 * You can contact BIRU at ask@biru.sh
 *
 */
@use "themes/m3-theme" as themes;
@use "@angular/material" as mat;
@use "themes/icon-theme" as icon;
@use "themes/button-theme" as button;
@use "themes/chips-theme" as chips;
@use "themes/toolbar-theme" as toolbar;
@use "themes/card-theme" as card;
@use "themes/form-field-theme" as form-field;
@use "themes/select-theme" as select;
@use "themes/radio-theme" as radio;
@use "themes/checkbox-theme" as checkbox;
@use "themes/menu-theme" as menu;
@use "themes/dialog-theme" as dialog;
@use "themes/list-theme" as list;
@use "themes/side-nav-theme" as side-nav;
@use "themes/divider_theme" as divider;
@use "themes/tabs-theme" as tabs;
@use "themes/expansion-theme" as expansion;
@use "themes/snackbar-theme" as snackbar;
@use "themes/table-theme" as table;
@use "themes/tooltip-theme" as tooltip;
@use "themes/badge-theme" as badge;
@use "themes/cdk-drag-theme" as cdk-drag;
@use "themes/cdk-virtual-scroll" as cdk-virtual-scroll;
@use "themes/slide-toggle-theme" as slide-toggle;
@use "themes/variables/variables" as variables;
@use "themes/app-table";
@use "themes/skeleton";
@use "themes/svg-logo";
@use "@blocknote/core/fonts/inter.css";
@use "@blocknote/mantine/style.css";
@tailwind base;
@tailwind components;
@tailwind utilities;





/************************ RESET CSS *************************/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

ol,
ul,
menu,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
input:where([type="button"]),
input:where([type="reset"]),
input:where([type="submit"]) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
  border: 0;
}

button,
[role="button"] {
  cursor: pointer;
}

:disabled {
  cursor: default;
}

button,
select {
  text-transform: none;
}

strong {
  font-weight: 500;
}

@mixin tokens-overrides() {
  @include button.tokens-overrides;
  @include toolbar.tokens-overrides;
  @include card.tokens-overrides;
  @include form-field.tokens-overrides;
  @include select.tokens-overrides;
  @include radio.tokens-overrides;
  @include checkbox.tokens-overrides;
  @include dialog.tokens-overrides;
  @include menu.tokens-overrides;
  @include list.tokens-overrides;
  @include side-nav.tokens-overrides;
  @include divider.tokens-overrides;
  @include tabs.tokens-overrides;
  @include expansion.tokens-overrides;
  @include snackbar.tokens-overrides;
  @include table.tokens-overrides;
  @include tooltip.tokens-overrides;
  @include badge.tokens-overrides;
  @include slide-toggle.tokens-overrides();
}

body {
  font-family: "Lexend", sans-serif;
  font-size: 14px;
  font-optical-sizing: auto;
  ::selection {
    background-color: var(--mat-sys-primary-container);
  }
  a {
    color: var(--mat-sys-on-primary-container);
    text-decoration-color: var(--mat-sys-primary);
    &:hover {
      text-decoration-line: underline;
      text-decoration-color: var(--mat-sys-primary);
    }
    &:focus {
      background-color: var(--mat-sys-primary-container);
      outline: none;
    }
  }
  @include mat.theme-overrides((
    label-large-size: 0.875rem,
    label-large-line-height: 1.25rem,
    label-large-weight: 500,
    label-medium-size: 0.75rem,
    label-medium-line-height: 1rem,
    label-medium-weight: 500,
    label-small-size: 0.625rem,
    label-small-line-height: 0.875rem,
    label-small-weight: 400,
    body-large-size: 1rem,
    body-large-line-height: 1.25rem,
    body-large-weight: 400,
    body-medium-size: 0.875rem,
    body-medium-line-height: 1.25rem,
    body-medium-weight: 400,
    body-small-size: 0.75rem,
    body-small-line-height: 1rem,
    body-small-weight: 300,
    title-large-size: 1.25rem,
    title-large-line-height: 1.75rem,
    title-large-weight: 500,
    title-medium-size: 1.125rem,
    title-medium-line-height: 1.75rem,
    title-medium-weight: 500,
    title-small-size: 1rem,
    title-small-line-height: 1.5rem,
    title-small-weight: 500,
    headline-large-size: 2.25rem,
    headline-large-line-height: 2.5rem,
    headline-large-weight: 500,
    headline-medium-size: 1.875rem,
    headline-medium-line-height: 2.25rem,
    headline-medium-weight: 500,
    headline-small-size: 1.5rem,
    headline-small-line-height: 2rem,
    headline-small-weight: 500,
    corner-medium: 4px,
  ));
  @include mat.elevation-classes();
  @include mat.app-background();
  @include mat.all-component-bases(themes.$light-theme);
  @include mat.all-component-densities(themes.$light-theme);
  @include mat.all-component-typographies(themes.$light-theme);
  @include mat.typography-hierarchy(themes.$light-theme);

  @media (prefers-color-scheme: light) {
    color: mat.get-theme-color(themes.$light-theme, neutral, 17);
    background-color: mat.get-theme-color(themes.$light-theme, neutral, 100);

    @include mat.theme-overrides((
      background: mat.get-theme-color(themes.$light-theme, neutral, 100),
      surface:  mat.get-theme-color(themes.$light-theme, neutral, 100),
      surface-container: mat.get-theme-color(themes.$light-theme, neutral, 100),
      surface-dim: mat.get-theme-color(themes.$light-theme, primary, 20),
      on-background: mat.get-theme-color(themes.$light-theme, neutral, 17),
      on-surface: mat.get-theme-color(themes.$light-theme, neutral, 25),
      on-surface-variant: mat.get-theme-color(themes.$light-theme, neutral, 50),
      outline:  mat.get-theme-color(themes.$light-theme, neutral, 80),
      outline-variant:  mat.get-theme-color(themes.$light-theme, neutral, 90),
      primary : mat.get-theme-color(themes.$light-theme, primary, 80),
      primary-container : mat.get-theme-color(themes.$light-theme, primary, 95),
      inverse-primary: mat.get-theme-color(themes.$light-theme, primary, 10),
      on-primary: mat.get-theme-color(themes.$light-theme, primary, 60),
      on-primary-container: mat.get-theme-color(themes.$light-theme, primary, 30),
      secondary: mat.get-theme-color(themes.$light-theme, neutral-variant, 70),
      secondary-container: mat.get-theme-color(themes.$light-theme, neutral-variant, 95),
      on-secondary: mat.get-theme-color(themes.$light-theme, neutral-variant, 60),
      on-secondary-container: mat.get-theme-color(themes.$light-theme, neutral-variant, 30),
      tertiary: mat.get-theme-color(themes.$light-theme, tertiary, 80),
      tertiary-container: mat.get-theme-color(themes.$light-theme, tertiary, 90),
      on-tertiary: mat.get-theme-color(themes.$light-theme, tertiary, 50),
      on-tertiary-container: mat.get-theme-color(themes.$light-theme, tertiary, 20),
      error: mat.get-theme-color(themes.$light-theme, error, 80),
      error-container: mat.get-theme-color(themes.$light-theme, error, 95),
      on-error: mat.get-theme-color(themes.$light-theme, error, 60),
      on-error-container: mat.get-theme-color(themes.$light-theme, error, 30),
      level1:  1px 1px 1px rgba(0, 0, 0, 0.3),
      level2:  2px 2px 2px rgba(0, 0, 0, 0.2),
      level3:  4px 4px 4px rgba(0, 0, 0, 0.1)
    ));
    @include tokens-overrides;
  }

  @media (prefers-color-scheme: dark) {
    color: mat.get-theme-color(themes.$dark-theme, neutral, 17);
    background-color: mat.get-theme-color(themes.$dark-theme, neutral, 92);
    --sys-on-surface-lower-emphasis: mat.get-theme-color(themes.$dark-theme, neutral, 40);
    @include mat.theme-overrides((
      background: mat.get-theme-color(themes.$dark-theme, neutral, 92),
      surface:  mat.get-theme-color(themes.$dark-theme, neutral, 92),
      surface-container: mat.get-theme-color(themes.$dark-theme, neutral, 94),
      surface-dim: mat.get-theme-color(themes.$dark-theme, neutral, 98),
      on-background: mat.get-theme-color(themes.$dark-theme, neutral, 6),
      on-surface: mat.get-theme-color(themes.$dark-theme, neutral, 15),
      on-surface-variant: mat.get-theme-color(themes.$dark-theme, neutral, 40),
      outline:  mat.get-theme-color(themes.$dark-theme, neutral, 70),
      outline-variant:  mat.get-theme-color(themes.$dark-theme, neutral, 80),
      primary : mat.get-theme-color(themes.$dark-theme, primary, 70),
      primary-container : mat.get-theme-color(themes.$dark-theme, primary, 80),
      on-primary: mat.get-theme-color(themes.$dark-theme, primary, 50),
      on-primary-container: mat.get-theme-color(themes.$dark-theme, primary, 20),
      secondary: mat.get-theme-color(themes.$dark-theme, neutral-variant, 70),
      secondary-container: mat.get-theme-color(themes.$dark-theme, neutral-variant, 90),
      on-secondary: mat.get-theme-color(themes.$dark-theme, neutral-variant, 50),
      on-secondary-container: mat.get-theme-color(themes.$dark-theme, tertiary, 10),
      tertiary: mat.get-theme-color(themes.$dark-theme, tertiary, 80),
      tertiary-container: mat.get-theme-color(themes.$dark-theme, tertiary, 90),
      on-tertiary: mat.get-theme-color(themes.$dark-theme, tertiary, 50),
      on-tertiary-container: mat.get-theme-color(themes.$dark-theme, tertiary, 20),
      error: mat.get-theme-color(themes.$dark-theme, error, 70),
      error-container: mat.get-theme-color(themes.$dark-theme, error, 80),
      on-error: mat.get-theme-color(themes.$dark-theme, error, 50),
      on-error-container: mat.get-theme-color(themes.$dark-theme, error, 20),
      level1:  1px 1px 1px rgba(0, 0, 0, 0.6),
      level2:  2px 2px 2px rgba(0, 0, 0, 0.5),
      level3:  4px 4px 4px rgba(0, 0, 0, 0.4)
    ));
    @include tokens-overrides;
  }
}
