:root {
    // Colors
    --octopus-background: oklch(100% 0 0deg);
    --octopus-primary: oklch(55% 0.118 159.16deg);
    --octopus-secondary: oklch(90% 0 0deg);
    --octopus-tertiary: oklch(45.74% 0.0822 222.06deg);
    --octopus-danger: oklab(50% 0.18 0.105);
    --octopus-warning:oklch(55% 0.1647 42.35deg);
    --octopus-gray-text: oklch(44.75% 0.0121 229.13deg);
    --octopus-color-text: oklch(30% 0 0deg);
    --octopus-color-on-primary: oklch(100% 0 0deg);
    --octopus-border-default: oklch(91% 0.007 248deg);
    --octopus-shadow: oklch(0% 0 0deg / 40%); 
    --octopus-player-color:oklch(27% 0 0deg);
    --octopus-gray: oklch(50% 0 0deg);

    // Relative colors
    --octopus-primary-darker: oklch(from var(--octopus-primary) calc(l - 0.03) c h);
    --octopus-primary-really-transparent: oklch(from var(--octopus-primary) l c h / 30%);
    --octopus-primary-more-transparent: oklch(from var(--octopus-primary) l c h / 35%);
    --octopus-primary-transparent: oklch(from var(--octopus-primary) l c h / 60%);
    --octopus-primary-less-transparent: oklch(from var(--octopus-primary) l c h / 90%);
    --octopus-complementary-color:  oklch(from var(--octopus-primary) l c calc(h + 180));
    --octopus-secondary-darker: oklch(from var(--octopus-secondary) calc(l - 0.1) c h);
    --octopus-secondary-lighter: oklch(from var(--octopus-secondary) calc(l * 1.05) c h);
    --octopus-text-disabled: oklch(from var(--octopus-secondary) calc(l * 0.60) c h);
    --octopus-background-transparent: oklch(from var(--octopus-background) l c h / 40%);
    --octopus-tertiary-really-transparent: oklch(from var(--octopus-tertiary) l c h / 30%);

    //Gradient
    --octopus-gradient : linear-gradient(90deg,var(--octopus-primary) 0%, var(--octopus-tertiary) 100%);

    // Size
    --octopus-image-size: 12.5rem;
    --octopus-podcast-size: 13.5rem;
    --octopus-border-radius: 0.2rem;
    --octopus-line-clamp:2;
    --octopus-max-height-description: 7rem;

    //Font-family
    --octopus-font-family: Montserrat,sans-serif,"Helvetica Neue";

    // ClassicDataTable
    --table-line-height: 48px;

    // Buttons
    --octopus-btn-primary-bg: var(--octopus-primary);
    --octopus-btn-primary-fg: var(--octopus-color-on-primary);
    --octopus-btn-secondary-bg: var(--octopus-secondary);
    --octopus-btn-secondary-fg: black;
    --octopus-btn-play-bg: var(--octopus-primary-less-transparent);
    --octopus-btn-play-fg: white;
    --octopus-btn-play-radius: var(--octopus-border-radius);
    --octopus-btn-social-bg: var(--octopus-secondary);
    --octopus-btn-social-fg: var(--octopus-primary);
    --octopus-btn-paginate-fg: var(--octopus-btn-secondary-fg);
    --octopus-btn-paginate-bg: var(--octopus-btn-secondary-bg);
    --octopus-btn-paginate-active-fg: var(--octopus-btn-paginate-fg);
    --octopus-btn-paginate-active-bg: var(--octopus-primary-more-transparent);

    // Popover
    // Color for text of items in popovers when hovered
    --octopus-popover-dropdown-item-color-fg-hover: var(--octopus-color-text);
    // Color for background of items in popovers when hovered
    --octopus-popover-dropdown-item-color-bg-hover: var(--octopus-secondary-lighter);

    // Player
    // Color for the transcript background
    --octopus-player-transcript-bg-color: oklch(from var(--octopus-player-color) calc(l + 0.1) c h);
    // Color for the text
    --octopus-player-text-color: oklch(98.16% 0.0017 247.84deg);
    // Color for the progress bar
    --octopus-player-progress-color-current: var(--octopus-primary);
    // Color for the progress bar background
    --octopus-player-progress-background-color: var(--octopus-secondary-lighter);
    // Color of the player's button
    --octopus-player-btn-bg: var(--octopus-btn-primary-bg);
    // Color of the player's button
    --octopus-player-btn-fg: var(--octopus-btn-primary-fg);

    // Smartlink
    --octopus-smartlink-title-color: var(--octopus-gray-text);
    --octopus-smartlink-title-fontsize: 1.5rem;

    // Titles
    --octopus-h1-color-fg: var(--octopus-gray-text);
    --octopus-h1-font-size: 1.5rem;
    --octopus-h1-font-size-mobile: 1.2rem;
    --octopus-h2-color-fg: var(--octopus-color-text);
    --octopus-h2-font-size: 1.1rem;
    --octopus-h2-font-size-mobile: 1.0rem;
}