/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for KserTheme.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values. Copy this
 * file to your web root, so it sits next to index.php, and clear Drupal's
 * cache. Then, any changes you make in this file should be reflected right away.
 */

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.2826 0.0561 230.98);
  --card: oklch(1 0 89.876);
  /* I think this should be a variable based on background variable */
  --card-foreground: oklch(0.2826 0.0561 230.98);
    /* I think this should be a variable based on foreground variable replaced it with out foreground variable to be the same font */
  --primary: oklch(0.6235 0.1379 161.42);
  --primary-foreground: oklch(1 0 0);
  --primary-light: oklch(from var(--primary) calc(l + .05) calc(c + .02) h) ;
  --primary-bright: oklch(from var(--primary-light) l calc(c + .1) h);
  --primary-muted: oklch(from var(--primary) l calc(c - .03) h);
  --primary-inverted: oklch(from var(--primary) l c calc(h + 180));
  --primary-inverted-modified:oklch(from var(--primary-flipped) calc(l - .2) calc(c + .3) h);
  
  
  --secondary: oklch(0.7519 0.0744 214.9);
  --secondary-foreground: oklch(1 0 0);
  --secondary-light: oklch(from var(--secondary) calc(l + .05) calc(c + .02) h) ;
  --secondary-bright: oklch(from var(--secondary-light) l calc(c + .1) h);
  --secondary-muted: oklch(from var(--secondary) l calc(c - .03) h);
  --secondary-inverted: oklch(from var(--secondary) l c calc(h + 180));
  --secondary-inverted-modified: oklch(from var(--secondary-inverted) calc(l - .15) calc(c + .3) h);

  --tertiary: var(--secondary-inverted-modified);
  --tertiary-foreground: oklch(1 0 0);
  --tertiary-light: oklch(from var(--tertiary) calc(l + .05) calc(c + .02) h) ;
  --tertiary-bright: oklch(from var(--tertiary-light) l calc(c + .1) h);
  --tertiary-muted: oklch(from var(--tertiary) l calc(c - .03) h);

  --dark: oklch(0.2826 0.0561 230.98);
  --dark-foreground: oklch(1 0 0);
  --dark-light: oklch(from var(--dark) calc(l + .05) calc(c + .02) h) ;
  --dark-bright: oklch(from var(--dark-light) l calc(c + .1) h);
  --dark-muted: oklch(from var(--dark) l calc(c - .03) h);
  /* I think muted variables should be the same as card. Might be good for header or the mobile menu */
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.373 0.031 259.733);





  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: oklch(0.2826 0.0561 230.98);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.2826 0.0561 230.98);
  --input: oklch(0.872 0.009 258.338);
  --font-sans: "Rubik", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
  --link-color:
}

.dark {
  --background: oklch(0.13 0.043 265.132);
  --foreground: oklch(1 0 89.876);
  --card: oklch(0.28 0.041 260.329);
  --card-foreground: oklch(0.9219 0 0);
  --primary: oklch(0.547 0.246 262.866);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.42 0.08 262.866);;
  --secondary-foreground: oklch(0.9219 0 0);
  --muted: oklch(0.373 0.031 259.733);
  --muted-foreground: oklch(0.967 0.003 264.542);
  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: oklch(0.13 0.043 265.132);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.373 0.031 259.733);
  --input: oklch(0.373 0.031 259.733);
  --font-sans: "Rubik", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}