/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for ByteTheme.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values.
 */

:root {
  --background: oklch(1 0 89.876);
  --foreground: oklch(0 0 0);
  --card: oklch(0.9526 0.0325 138.21);
  --card-foreground: var(--foreground);
  --primary: oklch(0.6609 0.1498 149.18);
  --primary-foreground: var(--foreground);
  --secondary: oklch(0.816 0.208078 126.1346);
  --secondary-foreground: oklch(1 0 89.876);
  --muted: oklch(0.816 0.208078 126.1346);
  --muted-foreground: oklch(62.341% 0.00007 271.152);
  --accent: oklch(0.3379 0.093 150.03);
  --accent-foreground: oklch(1 0 89.876);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(59.03% 0.15095 153.345 / 0.543);
  --input: oklch(59.359% 0.15012 153.729);
  --font-sans: "Century Gothic", "Roboto", "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);

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

/* Light styling for presentation */
details {
  border-block-start: 1px solid oklch(59.03% 0.15095 153.345 / 0.543);
  border-block-end: 1px solid oklch(59.03% 0.15095 153.345 / 0.543);
  border-end-start-radius: 5px;
  border-end-end-radius: 5px;
  border-start-end-radius: 5px;
  border-start-start-radius: 5px;
  border-left: 1px solid oklch(59.03% 0.15095 153.345 / 0.543);
  border-right: 1px solid oklch(59.03% 0.15095 153.345 / 0.543);
  margin-block: .5rem;
  padding-block: .5rem;
  padding-right: 1.5em;
  padding-left: 1.5em;
}

summary {
  /* Pin the custom marker to the container */
  position: relative;
  /* Register summary as an anchor element */
  anchor-name: --summary;
  
  &::marker {
    content: "";
  }
  
  &::before,
  &::after {
    /* Custom marker dimensions */
    content: "";
    border-block-start: 3px solid oklch(59.359% 0.15012 153.729);
    height: 0;
    width: 1rem;
    
    /* Positions the lines */
    inset-block-start: 50%;
    inset-inline-end: 0;
    
    /* Anchor the shape to the summary */
    position: absolute;
    position-anchor: --summary;
    position-area: top end;
  }
  
  /* Rotate just the ::after line to create a "+"" shape */
  &::after {
    transform: rotate(90deg);
    transform-origin: 50%;
  }
}

/* Rotate the line when open */
details[open] summary::after {
  transform: rotate(0deg);
}

table, th, td {
    padding-inline-start: 10px;
}