Back Send feedback to ilkka.kuivanen@me.com

Cito Custom Properties

2024-04-05 Friday (Updated on 2025-12-01 Monday)

What

A collection of CSS custom properties to be used in web app design and development.

Idea

Adhere to the idea of "design tokens" by declaring variables to be used across the application.
Write CSS faster with help of unified and pre-configured values.
Support easy theming.
Lightweight, maintainable and future-proof approach that works with any framework or library that follows standard ways to author CSS.

Structure

Custom property overview

Figure: Custom property overview

Private API
Public API: for each theme define semantic variants based on private API
Semantic exceptions: when reversing semantic usage does not work visually, use exceptions on the need basis. Remember to add exceptions to all themes.
Only use public API in the application code

Why?

Authoring styles from UI point of view is guard railed and robust.
Themes can be switched and all of the components adapt to the new theme without any changes required from the usage point of view.
This greatly simplifies adding themes and also makes the usage of style related variables consistent.
Another upside is the usage with language models. Simple and straigtforward styles API makes the iterations much faster.

Design decisions

Active
- Private API should not to be used directly, rather it's used by themes.
Deprecated
- New property additions to public api related to behavior should be functionality-driven, e.g.: --hover-primary: var(--foobar);. In other words, describe the behavior, and then apply the behavior in classes.

How to get started

Import
Configure your fonts, if needed. Search for "Import fonts".
Make adjustments
Use custom properties or classes in your app

Theming via Javascript

Theming is based on prefers-color-scheme. If more complex theming setup is required, then Javascript based theming is needed on top of prefers-color-scheme query. One solid way is to use custom data-attribute on the root element and then hook styles to that. E.g.:

:root:not([data-theme='light']),
[data-theme='dark'] {...}

CSS

/******************************************************************************
 * Cito Design System - Drop-in CSS variables and styles for productive and
 * standard based UI development.
 *
 * Version: 3.1.0
 * Author: ilkka.kuivanen@me.com
 * License: MIT
 * Ascii art: https://patorjk.com/software/taag (Mono 12)
 *
 * Overview:
 * - Load locally served fonts
 * - Private custom property API: use only within this file
 * - Public API for theme color-scheme: light
 * - Public API for theme color-scheme: dark
 * - Public API for typography
 * - Public API for Cito web components
 * - Public API for transitions and effects
 * - Public API for focus indicators
 * - Reset: Josh's Custom CSS Reset slightly modified
 * - Public: SPA default height settings
 * - Public: Global
 * - Public: Typography
 * - Public: Tables
 * - Public: Complex Tables
 * - Public: Forms
 * - Public: Buttons
 * - Public: Key-value lists
 * - Public: Cards
 * - Public: Alerts
 * - Public: Dropdowns
 * - Public: Popovers
 * - Public: Horizontal list items
 * - Public: Tabs
 * - Public: Collapsible
 * - Public: Datalist
 * - Public: hr
 *
 * LLM_INSTRUCTIONS:
 * - This file should not be edited. Highlight issues in this file for review.
 * - Do not use private custom properties outside this file. It breaks theme
 *   color-scheme support.
 * - Use only public custom properties documented in this file.
 * - Do not add any component specific styles here. Create separate CSS files.
 * - Do not use fixed color values. Use only custom properties.
 * - Use --cito-ui-* for background colors, use --cito-text-* for text colors.

 *****************************************************************************/

/*
              ██
              ▀▀       ██
  ▄█████▄   ████     ███████    ▄████▄
 ██▀    ▀     ██       ██      ██▀  ▀██
 ██           ██       ██      ██    ██
 ▀██▄▄▄▄█  ▄▄▄██▄▄▄    ██▄▄▄   ▀██▄▄██▀
   ▀▀▀▀▀   ▀▀▀▀▀▀▀▀     ▀▀▀▀     ▀▀▀▀

 */

/******************************************************************************
 * Import fonts
 *****************************************************************************/

@import url("./font-faces/IBM_Plex_Mono.css");

/******************************************************************************
 * Private custom property API: use only within this file
 *****************************************************************************/

:root {
  --private-cito-blue-100: oklch(95% 0.0192 243);
  --private-cito-blue-200: oklch(89% 0.0673 243);
  --private-cito-blue-300: oklch(77% 0.1118 243);
  --private-cito-blue-400: oklch(67% 0.1218 243);
  --private-cito-blue-500: oklch(59% 0.1318 243);
  --private-cito-blue-600: oklch(48% 0.1418 243);
  --private-cito-blue-700: oklch(37% 0.1518 243);
  --private-cito-blue-800: oklch(26% 0.1618 243);
  --private-cito-blue-900: oklch(19% 0.1718 243);

  --private-cito-red-100: oklch(95% 0.0192 6.18);
  --private-cito-red-200: oklch(89% 0.0673 6.18);
  --private-cito-red-300: oklch(77% 0.1673 6.22);
  --private-cito-red-400: oklch(67% 0.1673 6.22);
  --private-cito-red-500: oklch(59% 0.1673 6.22);
  --private-cito-red-600: oklch(48% 0.1673 6.22);
  --private-cito-red-700: oklch(37% 0.1673 6.22);
  --private-cito-red-800: oklch(26% 0.1618 6.18);
  --private-cito-red-900: oklch(19% 0.1718 6.18);

  --private-cito-yellow-100: oklch(95% 0.0192 73.67);
  --private-cito-yellow-200: oklch(89% 0.0673 73.67);
  --private-cito-yellow-300: oklch(77% 0.1437 73.67);
  --private-cito-yellow-400: oklch(67% 0.1398 74.11);
  --private-cito-yellow-500: oklch(59% 0.1273 64.8);
  --private-cito-yellow-600: oklch(48% 0.1267 56.11);
  --private-cito-yellow-700: oklch(37% 0.1071 56.11);
  --private-cito-yellow-800: oklch(26% 0.0783 73.67);
  --private-cito-yellow-900: oklch(19% 0.068 73.67);

  --private-cito-green-100: oklch(95% 0.0192 141.41);
  --private-cito-green-200: oklch(89% 0.0673 141.41);
  --private-cito-green-300: oklch(77% 0.1118 141.41);
  --private-cito-green-400: oklch(67% 0.1218 141.41);
  --private-cito-green-500: oklch(59% 0.1318 141.41);
  --private-cito-green-600: oklch(48% 0.1418 141.41);
  --private-cito-green-700: oklch(37% 0.1518 141.41);
  --private-cito-green-800: oklch(26% 0.1618 141.41);
  --private-cito-green-900: oklch(19% 0.1718 141.41);

  --private-cito-gray-25: oklch(99% 0.0192 255.78);
  --private-cito-gray-50: oklch(98% 0.0192 255.78);
  --private-cito-gray-75: oklch(97% 0.0192 255.78);
  --private-cito-gray-100: oklch(95% 0.0192 255.78);
  --private-cito-gray-200: oklch(89% 0.0192 255.78);
  --private-cito-gray-300: oklch(77% 0.0192 255.78);
  --private-cito-gray-400: oklch(67% 0.0192 255.78);
  --private-cito-gray-500: oklch(59% 0.0192 255.78);
  --private-cito-gray-600: oklch(48% 0.0192 255.78);
  --private-cito-gray-700: oklch(37% 0.0192 255.78);
  --private-cito-gray-800: oklch(26% 0.0192 255.78);
  --private-cito-gray-900: oklch(19% 0.0192 255.78);
  --private-cito-gray-925: oklch(15% 0.0192 255.78);
  --private-cito-gray-950: oklch(12.5% 0.0192 255.78);
  --private-cito-gray-975: oklch(10% 0.0192 255.78);
}

/******************************************************************************
 * Public API for theme color-scheme: light
 *****************************************************************************/

@media (prefers-color-scheme: light) {
  :root {
    --cito-white: oklch(98% 0 0);
    --cito-black: oklch(10% 0 0);
    --cito-upfront: var(--cito-black);
    --cito-behind: var(--cito-white);

    --cito-primary-100: var(--private-cito-blue-100);
    --cito-primary-200: var(--private-cito-blue-200);
    --cito-primary-300: var(--private-cito-blue-300);
    --cito-primary-400: var(--private-cito-blue-400);
    --cito-primary-500: var(--private-cito-blue-500);
    --cito-primary-600: var(--private-cito-blue-600);
    --cito-primary-700: var(--private-cito-blue-700);
    --cito-primary-800: var(--private-cito-blue-800);
    --cito-primary-900: var(--private-cito-blue-900);

    --cito-secondary-100: var(--private-cito-gray-100);
    --cito-secondary-200: var(--private-cito-gray-200);
    --cito-secondary-300: var(--private-cito-gray-300);
    --cito-secondary-400: var(--private-cito-gray-400);
    --cito-secondary-500: var(--private-cito-gray-500);
    --cito-secondary-600: var(--private-cito-gray-600);
    --cito-secondary-700: var(--private-cito-gray-700);
    --cito-secondary-800: var(--private-cito-gray-800);
    --cito-secondary-900: var(--private-cito-gray-900);

    --cito-success-100: var(--private-cito-green-100);
    --cito-success-200: var(--private-cito-green-200);
    --cito-success-300: var(--private-cito-green-300);
    --cito-success-400: var(--private-cito-green-400);
    --cito-success-500: var(--private-cito-green-500);
    --cito-success-600: var(--private-cito-green-600);
    --cito-success-700: var(--private-cito-green-700);
    --cito-success-800: var(--private-cito-green-800);
    --cito-success-900: var(--private-cito-green-900);

    --cito-warning-100: var(--private-cito-yellow-100);
    --cito-warning-200: var(--private-cito-yellow-200);
    --cito-warning-300: var(--private-cito-yellow-300);
    --cito-warning-400: var(--private-cito-yellow-400);
    --cito-warning-500: var(--private-cito-yellow-500);
    --cito-warning-600: var(--private-cito-yellow-600);
    --cito-warning-700: var(--private-cito-yellow-700);
    --cito-warning-800: var(--private-cito-yellow-800);
    --cito-warning-900: var(--private-cito-yellow-900);

    --cito-danger-100: var(--private-cito-red-100);
    --cito-danger-200: var(--private-cito-red-200);
    --cito-danger-300: var(--private-cito-red-300);
    --cito-danger-400: var(--private-cito-red-400);
    --cito-danger-500: var(--private-cito-red-500);
    --cito-danger-600: var(--private-cito-red-600);
    --cito-danger-700: var(--private-cito-red-700);
    --cito-danger-800: var(--private-cito-red-800);
    --cito-danger-900: var(--private-cito-red-900);

    --cito-info-100: var(--private-cito-blue-100);
    --cito-info-200: var(--private-cito-blue-200);
    --cito-info-300: var(--private-cito-blue-300);
    --cito-info-400: var(--private-cito-blue-400);
    --cito-info-500: var(--private-cito-blue-500);
    --cito-info-600: var(--private-cito-blue-600);
    --cito-info-700: var(--private-cito-blue-700);
    --cito-info-800: var(--private-cito-blue-800);
    --cito-info-900: var(--private-cito-blue-900);

    --cito-link-100: var(--private-cito-blue-100);
    --cito-link-200: var(--private-cito-blue-200);
    --cito-link-300: var(--private-cito-blue-300);
    --cito-link-400: var(--private-cito-blue-400);
    --cito-link-500: var(--private-cito-blue-500);
    --cito-link-600: var(--private-cito-blue-600);
    --cito-link-700: var(--private-cito-blue-700);
    --cito-link-800: var(--private-cito-blue-800);
    --cito-link-900: var(--private-cito-blue-900);

    --cito-text-100: var(--private-cito-gray-100);
    --cito-text-200: var(--private-cito-gray-200);
    --cito-text-300: var(--private-cito-gray-300);
    --cito-text-400: var(--private-cito-gray-400);
    --cito-text-500: var(--private-cito-gray-500);
    --cito-text-600: var(--private-cito-gray-600);
    --cito-text-700: var(--private-cito-gray-700);
    --cito-text-800: var(--private-cito-gray-800);
    --cito-text-900: var(--private-cito-gray-900);

    --cito-ui-25: var(--private-cito-gray-25);
    --cito-ui-50: var(--private-cito-gray-50);
    --cito-ui-75: var(--private-cito-gray-75);
    --cito-ui-000: var(--private-cito-gray-100); /** Deprecated */
    --cito-ui-100: var(--private-cito-gray-100);
    --cito-ui-200: var(--private-cito-gray-200);
    --cito-ui-300: var(--private-cito-gray-300);
    --cito-ui-400: var(--private-cito-gray-400);
    --cito-ui-500: var(--private-cito-gray-500);
    --cito-ui-600: var(--private-cito-gray-600);
    --cito-ui-700: var(--private-cito-gray-700);
    --cito-ui-800: var(--private-cito-gray-800);
    --cito-ui-900: var(--private-cito-gray-900);

    /** Component specific exceptions: Anchor */
    --cito-anchor-color: var(--cito-primary-500);
    --cito-anchor-color--hover: var(--cito-primary-800);
    --cito-anchor-color--active: var(--cito-primary-900);

    /** Component specific exceptions: Alert */
    --cito-alert-danger-background-color: var(--cito-danger-700);
    --cito-alert-danger-border-color: var(--cito-danger-600);
    --cito-alert-danger-color: var(--cito-danger-100);

    /** Public API for Box shadow */

    --cito-box-shadow-100: oklch(0% 0 0 / 5%) 0 0.0625rem 0.125rem 0;
    --cito-box-shadow-200: oklch(0% 0 0 / 10%) 0 0.0625rem 0.1875rem 0,
      oklch(0% 0 0 / 6%) 0 0.0625rem 0.125rem 0;
    --cito-box-shadow-300: oklch(0% 0 0 / 10%) 0 0.25rem 0.375rem
        calc(-1 * 0.0625rem),
      oklch(0% 0 0 / 6%) 0 0.125rem 0.25rem calc(-1 * 0.0625rem);
    --cito-box-shadow-400: oklch(0% 0 0 / 10%) 0 0.625rem 0.9375rem
        calc(-1 * 0.1875rem),
      oklch(0% 0 0 / 5%) 0 0.25rem 0.375rem calc(-1 * 0.125rem);
    --cito-box-shadow-500: oklch(0% 0 0 / 10%) 0 1.25rem 1.5625rem
        calc(-1 * 0.3125rem),
      oklch(0% 0 0 / 4%) 0 0.625rem 0.625rem calc(-1 * 0.3125rem);
    --cito-box-shadow-600: oklch(0% 0 0 / 25%) 0 1.5625rem 3.125rem
      calc(-1 * 0.75rem);

    /** Public API for box shadow inset */
    --cito-box-shadow-inset-100: oklch(0% 0 0 / 10%) 0 0.125rem 0.15rem
      0.0625rem inset;
    --cito-box-shadow-inset-200: oklch(0% 0 0 / 10%) 0 0.25rem 0.25rem 0.125rem
      inset;

    /** Public API for box shadow border */
    --cito-box-shadow-border-100: var(--cito-ui-300) 0 0 0 0.0625rem;
    --cito-box-shadow-border-200: var(--cito-ui-500) 0 0 0 0.125rem;
  }
}

/******************************************************************************
 * Public API for theme color-scheme: dark
 *****************************************************************************/

@media (prefers-color-scheme: dark) {
  :root {
    --cito-white: oklch(98% 0 0);
    --cito-black: oklch(10% 0 0);
    --cito-upfront: var(--cito-white);
    --cito-behind: var(--cito-black);

    --cito-primary-100: var(--private-cito-blue-900);
    --cito-primary-200: var(--private-cito-blue-800);
    --cito-primary-300: var(--private-cito-blue-700);
    --cito-primary-400: var(--private-cito-blue-600);
    --cito-primary-500: var(--private-cito-blue-500);
    --cito-primary-600: var(--private-cito-blue-400);
    --cito-primary-700: var(--private-cito-blue-300);
    --cito-primary-800: var(--private-cito-blue-200);
    --cito-primary-900: var(--private-cito-blue-100);

    --cito-secondary-100: var(--private-cito-gray-900);
    --cito-secondary-200: var(--private-cito-gray-800);
    --cito-secondary-300: var(--private-cito-gray-700);
    --cito-secondary-400: var(--private-cito-gray-600);
    --cito-secondary-500: var(--private-cito-gray-500);
    --cito-secondary-600: var(--private-cito-gray-400);
    --cito-secondary-700: var(--private-cito-gray-300);
    --cito-secondary-800: var(--private-cito-gray-200);
    --cito-secondary-900: var(--private-cito-gray-100);

    --cito-success-100: var(--private-cito-green-900);
    --cito-success-200: var(--private-cito-green-800);
    --cito-success-300: var(--private-cito-green-700);
    --cito-success-400: var(--private-cito-green-600);
    --cito-success-500: var(--private-cito-green-500);
    --cito-success-600: var(--private-cito-green-400);
    --cito-success-700: var(--private-cito-green-300);
    --cito-success-800: var(--private-cito-green-200);
    --cito-success-900: var(--private-cito-green-100);

    --cito-warning-100: var(--private-cito-yellow-900);
    --cito-warning-200: var(--private-cito-yellow-800);
    --cito-warning-300: var(--private-cito-yellow-700);
    --cito-warning-400: var(--private-cito-yellow-600);
    --cito-warning-500: var(--private-cito-yellow-500);
    --cito-warning-600: var(--private-cito-yellow-400);
    --cito-warning-700: var(--private-cito-yellow-300);
    --cito-warning-800: var(--private-cito-yellow-200);
    --cito-warning-900: var(--private-cito-yellow-100);

    --cito-danger-100: var(--private-cito-red-900);
    --cito-danger-200: var(--private-cito-red-800);
    --cito-danger-300: var(--private-cito-red-700);
    --cito-danger-400: var(--private-cito-red-600);
    --cito-danger-500: var(--private-cito-red-500);
    --cito-danger-600: var(--private-cito-red-400);
    --cito-danger-700: var(--private-cito-red-300);
    --cito-danger-800: var(--private-cito-red-200);
    --cito-danger-900: var(--private-cito-red-100);

    --cito-info-100: var(--private-cito-blue-900);
    --cito-info-200: var(--private-cito-blue-800);
    --cito-info-300: var(--private-cito-blue-700);
    --cito-info-400: var(--private-cito-blue-600);
    --cito-info-500: var(--private-cito-blue-500);
    --cito-info-600: var(--private-cito-blue-400);
    --cito-info-700: var(--private-cito-blue-300);
    --cito-info-800: var(--private-cito-blue-200);
    --cito-info-900: var(--private-cito-blue-100);

    --cito-link-100: var(--private-cito-blue-900);
    --cito-link-200: var(--private-cito-blue-800);
    --cito-link-300: var(--private-cito-blue-700);
    --cito-link-400: var(--private-cito-blue-600);
    --cito-link-500: var(--private-cito-blue-500);
    --cito-link-600: var(--private-cito-blue-400);
    --cito-link-700: var(--private-cito-blue-300);
    --cito-link-800: var(--private-cito-blue-200);
    --cito-link-900: var(--private-cito-blue-100);

    --cito-text-100: var(--private-cito-gray-900);
    --cito-text-200: var(--private-cito-gray-800);
    --cito-text-300: var(--private-cito-gray-700);
    --cito-text-400: var(--private-cito-gray-600);
    --cito-text-500: var(--private-cito-gray-500);
    --cito-text-600: var(--private-cito-gray-400);
    --cito-text-700: var(--private-cito-gray-300);
    --cito-text-800: var(--private-cito-gray-200);
    --cito-text-900: var(--private-cito-gray-100);

    --cito-ui-25: var(--private-cito-gray-975);
    --cito-ui-50: var(--private-cito-gray-950);
    --cito-ui-75: var(--private-cito-gray-925);
    --cito-ui-000: var(--private-cito-gray-900); /** Deprecated */
    --cito-ui-100: var(--private-cito-gray-900);
    --cito-ui-200: var(--private-cito-gray-800);
    --cito-ui-300: var(--private-cito-gray-700);
    --cito-ui-400: var(--private-cito-gray-600);
    --cito-ui-500: var(--private-cito-gray-500);
    --cito-ui-600: var(--private-cito-gray-400);
    --cito-ui-700: var(--private-cito-gray-300);
    --cito-ui-800: var(--private-cito-gray-200);
    --cito-ui-900: var(--private-cito-gray-100);

    /** Public API for Box shadow */
    --cito-box-shadow-100: oklch(0% 0 0 / 100%) 0 0.0625rem 0.125rem 0;
    --cito-box-shadow-200: oklch(0% 0 0 / 100%) 0 0.0625rem 0.1875rem 0,
      oklch(0% 0 0 / 6%) 0 0.0625rem 0.125rem 0;
    --cito-box-shadow-300: oklch(0% 0 0 / 100%) 0 0.25rem 0.375rem
        calc(-1 * 0.0625rem),
      oklch(0% 0 0 / 6%) 0 0.125rem 0.25rem calc(-1 * 0.0625rem);
    --cito-box-shadow-400: oklch(0% 0 0 / 100%) 0 0.625rem 0.9375rem
        calc(-1 * 0.1875rem),
      oklch(0% 0 0 / 5%) 0 0.25rem 0.375rem calc(-1 * 0.125rem);
    --cito-box-shadow-500: oklch(0% 0 0 / 100%) 0 1.25rem 1.5625rem
        calc(-1 * 0.3125rem),
      oklch(0% 0 0 / 4%) 0 0.625rem 0.625rem calc(-1 * 0.3125rem);
    --cito-box-shadow-600: oklch(0% 0 0 / 100%) 0 1.5625rem 3.125rem
      calc(-1 * 0.75rem);

    /** Public API for box shadow inset */
    --cito-box-shadow-inset-100: oklch(10% 0 0 / 100%) 0 0.125rem 0.15rem
      0.0625rem inset;
    --cito-box-shadow-inset-200: oklch(10% 0 0 / 100%) 0 0.25rem 0.25rem
      0.125rem inset;

    /** Public API for box shadow border */
    --cito-box-shadow-border-100: var(--cito-black) 0 0 0 0.125rem;
    --cito-box-shadow-border-200: var(--cito-black) 0 0 0 0.25rem;

    /** Theme specific component styles */

    /** Anchor */
    --cito-anchor-color: var(--cito-primary-700);
    --cito-anchor-color--hover: var(--cito-primary-800);
    --cito-anchor-color--active: var(--cito-primary-900);

    /** Alert */
    --cito-alert-danger-background-color: var(--cito-danger-100);
    --cito-alert-danger-border-color: var(--cito-danger-200);
    --cito-alert-danger-color: var(--cito-danger-900);
  }
}

/******************************************************************************
 * Public API for typography
 *****************************************************************************/

:root {
  --cito-font-sans-serif: "Gill Sans", "Helvetica Neue", system-ui,
    -apple-system, sans-serif;
  --cito-font-serif: Georgia, "Times New Roman", Times, serif;
  --cito-font-monospace: "IBM Plex Mono", SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;

  --cito-font-heading: var(--cito-font-monospace);
  --cito-font-body: var(--cito-font-monospace);

  /** Major Second scale */
  --cito-font-size-000: 0.625rem; /*  10.00 */
  --cito-font-size-100: 0.702rem; /*  11.24 */
  --cito-font-size-200: 0.79rem; /*   12.64 */
  --cito-font-size-300: 0.889rem; /*  14.22 */
  --cito-font-size-400: 1rem; /*      16.00 */
  --cito-font-size-500: 1.125rem; /*  18.00 */
  --cito-font-size-600: 1.266rem; /*  20.25 */
  --cito-font-size-700: 1.424rem; /*  22.78 */
  --cito-font-size-800: 1.602rem; /*  25.63 */
  --cito-font-size-900: 1.802rem; /*  28.83 */
  --cito-font-size-1000: 2.027rem; /* 32.44 */
  --cito-font-size-1100: 2.281rem; /* 36.49 */
  --cito-font-size-1200: 2.566rem; /* 41.05 */
  --cito-font-size-1300: 2.887rem; /* 46.18 */
  --cito-font-size-1400: 3.247rem; /* 51.96 */
  --cito-font-size-1500: 3.653rem; /* 58.45 */
}

/******************************************************************************
 * Public API for Cito web components
 *****************************************************************************/

:root {
  --cito-chatbox-height: calc(100% - 2.5rem);
}

/******************************************************************************
 * Public API for transitions and effects
 *****************************************************************************/

:root {
  --cito-transition-fast: 0.1s;
  --cito-transition-default: 0.25s;

  --cito-transform-effect-1: skewX(55deg) scaleY(1.25) rotateX(66deg);
}

/******************************************************************************
 * Public API for focus indicators
 *
 * ACCESSIBILITY GUIDELINE: Focus indicators across components use:
 * - outline: 0.125rem solid [color] for most interactive elements
 * - outline-color: var(--cito-info-500) for buttons
 * - Minimum 2px (0.125rem) thickness for WCAG 2.1 AA compliance
 *****************************************************************************/

/******************************************************************************
 * Reset: Josh's Custom CSS Reset slightly modified
 * Source: https://www.joshwcomeau.com/css/custom-css-reset/
 *****************************************************************************/

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
#root {
  isolation: isolate;
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  line-height: 1.5;
}

/******************************************************************************
 * Public: SPA default height settings
 *****************************************************************************/

html,
body,
app-root,
main {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

/******************************************************************************
 * Public: Global
 *****************************************************************************/

html {
  font-family: var(--cito-font-body);
}

body {
  padding: 0;
  margin: 0;
  background-color: var(--cito-ui-100);
  color: var(--cito-text-900);
}

/******************************************************************************
 * Public: Typography
 *****************************************************************************/

p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
table,
a {
  color: var(--cito-text-800);
}

/******************************************************************************
 * Public: Tables
 *****************************************************************************/

table {
  margin-bottom: 1.5rem;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.1875rem;
  overflow: hidden;
}

th {
  text-align: left;
  font-size: var(--cito-font-size-000);
  font-weight: 700;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  background-color: var(--cito-ui-300);
  padding: 1rem 0.5rem;
}

th:first-child {
  border-top-left-radius: 0.1875rem;
}

th:last-child {
  border-top-right-radius: 0.1875rem;
}

tbody tr:last-child td:first-child {
  border-bottom-left-radius: 0.1875rem;
}

tbody tr:last-child td:last-child {
  border-bottom-right-radius: 0.1875rem;
}

td {
  background-color: var(--cito-ui-200);
  padding: 0.5rem;
  font-size: var(--cito-font-size-300);
}

td > ul {
  padding-left: 1rem;
}

td button {
  margin-right: 0.25rem;
}

td button:last-child {
  margin-right: 0;
}

/******************************************************************************
 * Public: Complex Tables (with collapsible drawers)
 *****************************************************************************/

/* Drawer row - hidden by default */
.cito-table-drawer {
  background-color: var(--cito-ui-100);
}

.cito-table-drawer td {
  padding: 0;
  background-color: var(--cito-ui-100);
}

/* Grid container for smooth height animation */
.cito-table-drawer-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
  padding: 0 0.5rem 0 2rem;
}

/* Inner wrapper for content */
.cito-table-drawer-content > * {
  overflow: hidden;
  min-height: 0;
  margin: 0;
  transition: margin 0.3s ease-out;
}

/* Open state */
.cito-table-drawer.open .cito-table-drawer-content {
  grid-template-rows: 1fr;
}

.cito-table-drawer.open .cito-table-drawer-content > * {
  margin: 1rem 0;
}

/* Toggle button indicator */
.cito-table-drawer-toggle::after {
  content: " ▼";
  font-size: 0.7em;
  margin-left: 0.25rem;
  transition: transform 0.3s ease-out;
  display: inline-block;
}

.cito-table-drawer-toggle.open::after {
  transform: rotate(180deg);
}

/* Highlight active toggle button */
.cito-btn.cito-table-drawer-toggle.open {
  background-color: var(--cito-primary-600);
  border-color: var(--cito-primary-600);
  color: var(--cito-primary-100);
}

.cito-btn.cito-table-drawer-toggle.open:hover {
  background-color: var(--cito-primary-500);
  border-color: var(--cito-primary-500);
  color: var(--cito-primary-100);
}

.cito-btn.cito-table-drawer-toggle.open:active {
  background-color: var(--cito-primary-700);
  border-color: var(--cito-primary-700);
  color: var(--cito-primary-100);
}

@media only screen and (max-width: 32rem) {
  tbody {
    display: block;
  }

  table {
    display: block;
  }

  tr:not(.cito-table-drawer) {
    padding: 0.35rem 0;
    display: flex;
    flex-direction: column;
  }

  tr:first-child {
    padding-top: 0;
  }

  tr th {
    display: none;
  }

  td:before {
    content: attr(data-col) ": ";
    margin-right: 0.25rem;
    text-transform: uppercase;
    font-size: var(--cito-font-size-200);
    font-weight: 700;
  }

  td[data-col="Actions"]:before {
    content: none;
  }

  td {
    display: block;
    text-wrap: wrap;
    padding: 0 1rem;
    font-size: var(--cito-font-size-200);
  }

  td:first-child {
    padding-top: 0.75rem;
  }

  td:last-child {
    padding-bottom: 0.75rem;
  }

  td ul {
    margin-bottom: 0;
  }

  /* Complex table drawer on mobile */
  .cito-table-drawer td {
    padding: 0;
  }

  .cito-table-drawer td:before {
    content: none;
  }
}

/******************************************************************************
 * Public: Forms
 *****************************************************************************/

/** Form group */

.cito-form-group {
  --gap-between-form-groups: 1rem;
  --gap-between-form-group-and-error: 0.25rem;
  --element-color: var(--cito-text-800);
  --element-color-disabled: var(--cito-text-600);
  --element-border-color: var(--cito-ui-500);
  --element-focus-outline: var(--cito-text-800);
  --checkbox-background-color: var(--cito-ui-700);
  --placeholder-color: var(--cito-text-600);

  display: flex;
  flex-direction: column;
  background-color: transparent;
}

.cito-form-error {
  --error-color: var(--cito-danger-500);

  display: none;
  color: var(--error-color);
  margin-top: var(--gap-between-form-group-and-error);
}

.cito-form-group.has-error .cito-form-error {
  display: block;
}

.cito-form-group:has(~ .cito-form-group) {
  margin-bottom: var(--gap-between-form-groups);
}

.cito-form-group label {
  color: var(--element-color);
}

.cito-form-group label.required::after {
  content: "*";
  margin-left: 0.25rem;
  color: var(--cito-danger-500);
}

.cito-form-group input,
.cito-form-group textarea,
.cito-form-group select {
  background-color: transparent;
  color: var(--element-color);
  border-radius: 0.25rem;
  border: 0.0625rem solid var(--element-border-color);
}

.cito-form-group input::placeholder,
.cito-form-group textarea::placeholder,
.cito-form-group select::placeholder {
  color: var(--placeholder-color);
}

.cito-form-group input:focus-visible,
.cito-form-group textarea:focus-visible,
.cito-form-group select:focus-visible {
  outline: 0.125rem solid var(--element-focus-outline);
}

.cito-form-group input:disabled,
.cito-form-group textarea:disabled,
.cito-form-group select:disabled {
  color: var(--element-color-disabled);
}

.cito-form-group-error {
  color: var(--error-color, var(--cito-danger-500));
  margin-top: 0.4rem;
}

/** Checkbox */

.checkbox-list {
  list-style: none;
  padding-left: 0;
}

.checkbox-list .checkbox-list {
  padding-left: 2rem;
}

.checkbox-parent-label,
.checkbox-child-label {
  user-select: none;
}

.checkbox {
  position: relative;
}

.checkbox input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.checkbox label {
  display: flex;
  gap: 0.25rem;
  align-items: baseline;
  user-select: none;
}

.checkbox label::before {
  content: "";
  display: inline-block;
  align-self: center;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.1rem;
  background-color: var(--checkbox-background-color);
  clip-path: polygon(
    0 100%,
    85% 100%,
    85% 85%,
    15% 85%,
    16% 15%,
    85% 15%,
    85% 100%,
    100% 100%,
    100% 51%,
    100% 20%,
    100% 0,
    0 0
  );
  transition: all 0.05s ease-in-out;
}

.checkbox input:checked + label::before {
  background-color: var(--checkbox-background-color);
  clip-path: polygon(5% 65%, 35% 97%, 98% 24%, 86% 16%, 34% 72%, 15% 53%);
}

.checkbox input:indeterminate + label::before {
  clip-path: polygon(
    21% 40%,
    0 40%,
    0 50%,
    0 63%,
    21% 63%,
    50% 63%,
    80% 63%,
    100% 64%,
    100% 50%,
    100% 39%,
    79% 39%,
    50% 40%
  );
}

.checkbox input:focus-visible + label {
  outline: 0.125rem solid var(--cito-info-500);
  outline-offset: 0.125rem;
}

/******************************************************************************
 * Public: Buttons
 *****************************************************************************/

.cito-btn {
  /* Modified by sibling variant classes */
  --font-size: var(--cito-font-size-400);
  --background-color: var(--cito-ui-100);
  --border-color: var(--cito-ui-400);
  --color: var(--cito-text-900);
  --disabled-opacity: 0.45;
  --focus-background-color: var(--cito-ui-200);
  --focus-border-color: var(--cito-ui-400);
  --focus-color: var(--cito-text-900);
  --hover-background-color: var(--cito-ui-200);
  --hover-border-color: var(--cito-ui-400);
  --hover-color: var(--cito-text-900);
  --active-background-color: var(--cito-ui-300);
  --active-border-color: var(--cito-ui-600);
  --active-color: var(--cito-text-900);
  --transition: background-color var(--cito-transition-default),
    border-color var(--cito-transition-default),
    color var(--cito-transition-default),
    box-shadow var(--cito-transition-default);
  border-radius: 0.166rem;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  font-size: var(--font-size);
  line-height: var(--font-size);
  margin: 0;
  padding: 0.25rem 0.35rem;
  text-align: center;
  letter-spacing: 0.01rem;
  background-color: var(--background-color);
  border: 0.0625rem solid var(--border-color);
  color: var(--color);
  transition: var(--transition);
}

.cito-btn:disabled,
.cito-btn[aria-disabled="true"] {
  pointer-events: none;
  user-select: none;
  opacity: var(--disabled-opacity);
}

.cito-btn:focus,
.cito-btn:focus-visible {
  outline-color: var(--cito-info-500);
  color: var(--focus-color);
  border: 0.0625rem solid var(--focus-border-color);
  background-color: var(--focus-background-color);
}

.cito-btn:hover {
  color: var(--hover-color);
  border: 0.0625rem solid var(--hover-border-color);
  background-color: var(--hover-background-color);
}

.cito-btn:active {
  color: var(--active-color);
  border: 0.0625rem solid var(--active-border-color);
  background-color: var(--active-background-color);
}

/* Variants */

.cito-btn.primary {
  --font-size: var(--cito-font-size-400);
  --background-color: var(--cito-primary-600);
  --border-color: var(--cito-primary-600);
  --color: var(--cito-primary-100);
  --disabled-opacity: 0.45;
  --focus-background-color: var(--cito-primary-500);
  --focus-border-color: transparent;
  --focus-color: var(--cito-primary-100);
  --hover-background-color: var(--cito-primary-500);
  --hover-border-color: var(--cito-primary-400);
  --hover-color: var(--cito-primary-100);
  --active-background-color: var(--cito-primary-400);
  --active-border-color: var(--cito-primary-600);
  --active-color: var(--cito-primary-100);
}

.cito-btn.danger {
  --font-size: var(--cito-font-size-400);
  --background-color: var(--cito-danger-600);
  --border-color: var(--cito-danger-600);
  --color: var(--cito-danger-100);
  --disabled-opacity: 0.45;
  --focus-background-color: var(--cito-danger-500);
  --focus-border-color: transparent;
  --focus-color: var(--cito-danger-100);
  --hover-background-color: var(--cito-danger-500);
  --hover-border-color: var(--cito-danger-400);
  --hover-color: var(--cito-danger-100);
  --active-background-color: var(--cito-danger-400);
  --active-border-color: var(--cito-danger-600);
  --active-color: var(--cito-danger-100);
}

.cito-btn.subtle {
  --font-size: var(--cito-font-size-400);
  --background-color: transparent;
  --border-color: transparent;
  --color: var(--cito-primary-700);
  --disabled-opacity: 0.45;
  --focus-background-color: transparent;
  --focus-border-color: transparent;
  --focus-color: var(--cito-primary-900);
  --hover-background-color: var(--cito-primary-100);
  --hover-border-color: var(--cito-primary-200);
  --hover-color: var(--cito-primary-900);
  --active-background-color: transparent;
  --active-border-color: transparent;
  --active-color: var(--cito-primary-900);
}

.cito-btn.subtle-danger {
  --font-size: var(--cito-font-size-400);
  --background-color: transparent;
  --border-color: transparent;
  --color: var(--cito-danger-700);
  --disabled-opacity: 0.45;
  --focus-background-color: transparent;
  --focus-border-color: transparent;
  --focus-color: var(--cito-danger-900);
  --hover-background-color: var(--cito-danger-100);
  --hover-border-color: var(--cito-danger-200);
  --hover-color: var(--cito-danger-900);
  --active-background-color: transparent;
  --active-border-color: transparent;
  --active-color: var(--cito-danger-900);
}

.cito-btn.small {
  --font-size: var(--cito-font-size-200);
  padding: 0.1rem 0.2rem;
}

/******************************************************************************
 * Public: Key-value lists
 *****************************************************************************/

.cito-kv-list {
  --key-color: var(--cito-text-800);
  --value-color: var(--cito-text-800);
  --value-not-set-color: var(--cito-text-600);

  font-family: var(--cito-font-monospace);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
  align-items: baseline;
  margin: 0;
}

.cito-kv-list dt {
  color: var(--key-color);
  font-size: var(--cito-font-size-100);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin: 0;
}

.cito-kv-list dd {
  color: var(--value-color);
  margin: 0;
}

.cito-kv-list dd.not-set {
  color: var(--value-not-set-color);
  font-style: oblique;
  letter-spacing: 0.05rem;
}

/** Modifiers */
/** alignment */
.cito-kv-list.align-key-end dt {
  text-align: end;
}

/** bg change */
.cito-kv-list.decorated-keys {
  gap: 0;
}

.cito-kv-list.decorated-keys dt {
  padding: 0.75rem;
  text-align: end;
  color: var(--cito-text-900);
  letter-spacing: 0.1875rem;
  background-color: var(--cito-ui-200);
}

.cito-kv-list.decorated-keys dd {
  padding: 0.75rem 1rem;
}

.cito-kv-list.decorated-keys dt:first-of-type {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.cito-kv-list.decorated-keys dt:last-of-type {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

/** emphasis */
.cito-kv-list.emphasize-key dt {
  font-size: var(--cito-font-size-300);
  text-transform: uppercase;
  letter-spacing: 0.0938rem;
  font-weight: 700;
}

/******************************************************************************
 * Public: Cards
 *****************************************************************************/

.cito-card {
  --card-background: var(--cito-ui-100);
  --card-border-color: var(--cito-ui-700);
  --card-border-radius: 0.375rem;
  --card-padding: 1.25rem;
  --card-shadow: var(--cito-box-shadow-200);
  --card-title-color: var(--cito-text-900);
  --card-body-color: var(--cito-text-700);
  --card-transition: box-shadow var(--cito-transition-default),
    transform var(--cito-transition-default);
  --card-gap: 0.75rem;
  --card-line-height: 1.5;

  background-color: var(--card-background);
  border: 0.125rem solid var(--card-border-color);
  border-radius: var(--card-border-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  transition: var(--card-transition);
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

.cito-card:hover {
  box-shadow: var(--cito-box-shadow-500);
  transform: scale(1.03);
}

.cito-card-title {
  color: var(--card-title-color);
  font-size: var(--cito-font-size-600);
  font-weight: 700;
  margin: 0;
}

.cito-card-body {
  color: var(--card-body-color);
  font-size: var(--cito-font-size-400);
  margin: 0;
  line-height: var(--card-line-height);
}

.cito-card-footer {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}

/** Card variants */

.cito-card.compact {
  --card-padding: 0.5rem;
  --card-gap: 0.5rem;

  align-self: flex-start;
}

.cito-card.compact .cito-card-body {
  --card-line-height: 1;
}

.cito-card.highlighted {
  --card-background: var(--cito-primary-200);
  --card-border-color: var(--cito-primary-500);
  --card-shadow: var(--cito-box-shadow-300);
  --card-title-color: var(--cito-primary-800);
  --card-body-color: var(--cito-primary-800);
}

.cito-card.success {
  --card-background: var(--cito-success-200);
  --card-border-color: var(--cito-success-500);
  --card-shadow: var(--cito-box-shadow-300);
  --card-title-color: var(--cito-success-800);
  --card-body-color: var(--cito-success-800);
}

.cito-card.warning {
  --card-background: var(--cito-warning-200);
  --card-border-color: var(--cito-warning-500);
  --card-shadow: var(--cito-box-shadow-300);
  --card-title-color: var(--cito-warning-800);
  --card-body-color: var(--cito-warning-800);
}

.cito-card.error {
  --card-background: var(--cito-danger-200);
  --card-border-color: var(--cito-danger-500);
  --card-shadow: var(--cito-box-shadow-300);
  --card-title-color: var(--cito-danger-800);
  --card-body-color: var(--cito-danger-800);
}

/******************************************************************************
 * Public: Alerts
 *****************************************************************************/

.cito-alert {
  --alert-background: var(--cito-info-200);
  --alert-border-color: var(--cito-info-500);
  --alert-color: var(--cito-info-800);
  --alert-border-radius: 0.375rem;
  --alert-padding: 1rem;
  --alert-font-size: var(--cito-font-size-400);
  --alert-line-height: 1.5;

  width: 100%;
  background-color: var(--alert-background);
  border: 0.125rem solid var(--alert-border-color);
  border-radius: var(--alert-border-radius);
  padding: var(--alert-padding);
  color: var(--alert-color);
  font-size: var(--alert-font-size);
  line-height: var(--alert-line-height);
  margin-bottom: 1rem;
}

.cito-alert.success {
  --alert-background: var(--cito-success-200);
  --alert-border-color: var(--cito-success-500);
  --alert-color: var(--cito-success-800);
}

.cito-alert.warning {
  --alert-background: var(--cito-warning-200);
  --alert-border-color: var(--cito-warning-500);
  --alert-color: var(--cito-warning-800);
}

.cito-alert.error {
  --alert-background: var(--cito-danger-200);
  --alert-border-color: var(--cito-danger-500);
  --alert-color: var(--cito-danger-800);
}

/******************************************************************************
 * Public: Dropdowns
 *****************************************************************************/

.cito-dropdown-menu {
  --dropdown-background: var(--cito-ui-100);
  --dropdown-border-color: var(--cito-ui-500);
  --dropdown-border-radius: 0.375rem;
  --dropdown-padding: 0;
  --dropdown-shadow: var(--cito-box-shadow-400);
  --dropdown-min-width: 12rem;
  --dropdown-max-width: fit-content;

  position: absolute;
  top: anchor(bottom);
  left: anchor(left);
  width: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  min-width: var(--dropdown-min-width);
  max-width: var(--dropdown-max-width);
  border: 0.125rem solid var(--dropdown-border-color);
  background-color: var(--dropdown-background);
  box-shadow: var(--dropdown-shadow);
  border-radius: var(--dropdown-border-radius);
  transition-property: display, opacity;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  transition-behavior: allow-discrete;
}

.cito-dropdown-menu:popover-open {
  opacity: 1;
}

@starting-style {
  .cito-dropdown-menu:popover-open {
    opacity: 0;
  }
}

.cito-dropdown-listbox {
  display: flex;
  flex-direction: column;
  max-height: 75vh;
  overflow-y: auto;
  padding: 0.5rem;
  gap: 0.25rem;
}

.cito-dropdown-listbox button {
  width: 100%;
  padding: 0.5rem;
  cursor: pointer;
  background-color: transparent;
  border: none;
  text-align: left;
  border-radius: 0.25rem;
  transition: background-color 150ms ease;
  font-size: var(--cito-font-size-400);
  color: var(--cito-text-900);
}

.cito-dropdown-listbox button:hover {
  background-color: var(--cito-ui-300);
}

.cito-dropdown-listbox button.danger {
  color: var(--cito-danger-700);
}

.cito-dropdown-listbox button.danger:hover {
  background-color: var(--cito-danger-200);
}

.cito-dropdown-divider {
  border: none;
  border-top: 0.0625rem solid var(--cito-ui-400);
  margin: 0.25rem 0;
}

.cito-dropdown-menu.compact .cito-dropdown-listbox {
  padding: 0.25rem;
  min-width: 8rem;
}

/******************************************************************************
 * Public: Popovers
 *****************************************************************************/

.cito-popover {
  --popover-background: var(--cito-ui-200);
  --popover-border-color: var(--cito-ui-500);
  --popover-border-radius: 0.375rem;
  --popover-padding: 1rem;
  --popover-shadow: var(--cito-box-shadow-300);
  --popover-max-width: 20rem;
  --popover-title-color: var(--cito-text-900);
  --popover-content-color: var(--cito-text-700);

  position: absolute;
  top: anchor(bottom);
  left: anchor(left);
  background-color: var(--popover-background);
  border: 0.125rem solid var(--popover-border-color);
  border-radius: var(--popover-border-radius);
  padding: var(--popover-padding);
  box-shadow: var(--popover-shadow);
  max-width: var(--popover-max-width);
  margin: 0;
  opacity: 0;
  transition-property: display, opacity;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  transition-behavior: allow-discrete;
}

.cito-popover:popover-open {
  opacity: 1;
}

@starting-style {
  .cito-popover:popover-open {
    opacity: 0;
  }
}

.cito-popover-title {
  color: var(--popover-title-color);
  font-size: var(--cito-font-size-500);
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}

.cito-popover-content {
  color: var(--popover-content-color);
  font-size: var(--cito-font-size-400);
  line-height: 1.5;
  margin: 0;
}

.cito-popover.success {
  --popover-background: var(--cito-success-200);
  --popover-border-color: var(--cito-success-500);
  --popover-title-color: var(--cito-success-800);
  --popover-content-color: var(--cito-success-800);
}

.cito-popover.warning {
  --popover-background: var(--cito-warning-200);
  --popover-border-color: var(--cito-warning-500);
  --popover-title-color: var(--cito-warning-800);
  --popover-content-color: var(--cito-warning-800);
}

.cito-popover.error {
  --popover-background: var(--cito-danger-200);
  --popover-border-color: var(--cito-danger-500);
  --popover-title-color: var(--cito-danger-800);
  --popover-content-color: var(--cito-danger-800);
}

.cito-popover.info {
  --popover-background: var(--cito-info-200);
  --popover-border-color: var(--cito-info-500);
  --popover-title-color: var(--cito-info-800);
  --popover-content-color: var(--cito-info-800);
}

/******************************************************************************
 * Public: Horizontal list items
 *****************************************************************************/

.cito-list-card {
  --list-card-background: var(--cito-ui-100);
  --list-card-border-color: var(--cito-ui-400);
  --list-card-border-radius: 0.375rem;
  --list-card-padding: 1rem;
  --list-card-gap: 1rem;
  --list-card-image-size: 3.5rem;
  --list-card-image-background: var(--cito-ui-300);
  --list-card-title-color: var(--cito-text-900);
  --list-card-body-color: var(--cito-text-700);
  --list-card-transition: background-color var(--cito-transition-default),
    border-color var(--cito-transition-default);

  container: cito-list-card / inline-size;
}

.cito-list-card-item {
  background-color: var(--list-card-background);
  border: 0.0625rem solid var(--list-card-border-color);
  border-radius: var(--list-card-border-radius);
  padding: var(--list-card-padding);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "image title actions"
    "image body actions";
  gap: var(--list-card-gap);
  align-items: center;
  transition: var(--list-card-transition);
}

@container cito-list-card (max-width: 30rem) {
  .cito-list-card-item {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "image title"
      "body body"
      "actions actions";
  }
}

.cito-list-card-item:hover {
  background-color: var(--cito-ui-200);
  border-color: var(--cito-ui-500);
}

.cito-list-card-image {
  grid-area: image;
  width: var(--list-card-image-size);
  height: var(--list-card-image-size);
  background-color: var(--list-card-image-background);
  border-radius: 0.25rem;
}

.cito-list-card-content {
  display: contents;
}

.cito-list-card-title {
  grid-area: title;
  color: var(--list-card-title-color);
  font-size: var(--cito-font-size-500);
  font-weight: 700;
  margin: 0;
}

.cito-list-card-body {
  grid-area: body;
  color: var(--list-card-body-color);
  font-size: var(--cito-font-size-300);
  line-height: 1.5;
  margin: 0;
}

.cito-list-card-actions {
  grid-area: actions;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/******************************************************************************
 * Public: Tabs
 *
 * ACCESSIBILITY NOTE: When implementing tabs, ensure proper ARIA attributes:
 * - Add role="tab" to .cito-tab elements
 * - Add aria-selected="true" to active tabs, "false" to inactive
 * - Wrap tabs in role="tablist"
 * - Associate tab panels with role="tabpanel" and aria-labelledby
 *****************************************************************************/

/** Horizontal tabs */

.cito-tabs {
  --tabs-border-color: var(--cito-ui-400);
  --tab-background: transparent;
  --tab-color: var(--cito-text-700);
  --tab-hover-background: var(--cito-ui-200);
  --tab-hover-color: var(--cito-text-900);
  --tab-hover-border-color: var(--cito-ui-300);
  --tab-active-background: var(--cito-ui-200);
  --tab-active-color: var(--cito-text-900);
  --tab-active-border-color: var(--cito-ui-600);
  --tab-padding: 0.75rem 1.25rem;
  --tab-transition: background-color var(--cito-transition-default),
    color var(--cito-transition-default),
    border-color var(--cito-transition-default);

  display: flex;
  border-bottom: 0.125rem solid var(--tabs-border-color);
  gap: 0.25rem;
}

.cito-tab {
  background-color: var(--tab-background);
  color: var(--tab-color);
  border: none;
  border-bottom: 0.1875rem solid transparent;
  padding: var(--tab-padding);
  cursor: pointer;
  font-size: var(--cito-font-size-400);
  font-weight: 500;
  transition: var(--tab-transition);
  margin-bottom: -0.125rem;
}

.cito-tab:hover {
  background-color: var(--tab-hover-background);
  color: var(--tab-hover-color);
  border-bottom-color: var(--tab-hover-border-color);
}

.cito-tab.active {
  background-color: var(--tab-active-background);
  color: var(--tab-active-color);
  border-bottom-color: var(--tab-active-border-color);
  font-weight: 700;
}

.cito-tab-content {
  padding: 1.5rem;
  display: none;
}

.cito-tab-content.active {
  display: block;
}

/** Vertical tabs */

.cito-tabs-container.vertical {
  display: flex;
  gap: 1.5rem;
}

.cito-tabs.vertical {
  flex-direction: column;
  border-bottom: none;
  border-right: 0.125rem solid transparent;
  min-width: 12rem;
}

.cito-tabs.vertical .cito-tab {
  border-bottom: none;
  border-right: 0.1875rem solid transparent;
  margin-bottom: 0;
  margin-right: -0.125rem;
  text-align: left;
}

.cito-tabs.vertical .cito-tab:hover {
  border-right-color: var(--tab-hover-border-color);
}

.cito-tabs.vertical .cito-tab.active {
  border-right-color: var(--tab-active-border-color);
  border-bottom-color: transparent;
}

.cito-tabs-container.vertical .cito-tab-content {
  flex: 1;
  padding: 0;
}

/******************************************************************************
 * Public: Collapsible
 *****************************************************************************/

.cito-details {
  --details-border-color: var(--cito-ui-400);
  --details-background: var(--cito-ui-100);
  --summary-color: var(--cito-text-900);
  --summary-background: var(--cito-ui-200);
  --summary-hover-background: var(--cito-ui-300);
  --summary-padding: 1rem;
  --content-padding: 1rem;
  --details-border-radius: 0.375rem;

  border: 0.0625rem solid var(--details-border-color);
  border-radius: var(--details-border-radius);
  background-color: var(--details-background);
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.cito-details summary {
  color: var(--summary-color);
  background-color: var(--summary-background);
  padding: var(--summary-padding);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  user-select: none;
  transition: background-color var(--cito-transition-default);
  position: relative;
}

.cito-details summary::-webkit-details-marker {
  display: none;
}

.cito-details summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform var(--cito-transition-default);
}

.cito-details[open] summary::before {
  transform: rotate(90deg);
}

.cito-details summary:hover {
  background-color: var(--summary-hover-background);
}

.cito-details-content {
  padding: var(--content-padding);
  animation: slideDown var(--cito-transition-default) ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/******************************************************************************
 * Public: Datalist
 *****************************************************************************/

.cito-datalist-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cito-datalist-wrapper label {
  color: var(--cito-text-800);
  font-size: var(--cito-font-size-400);
}

.cito-datalist-wrapper input {
  background-color: transparent;
  color: var(--cito-text-900);
  border-radius: 0.25rem;
  border: 0.0625rem solid var(--cito-ui-500);
  padding: 0.5rem;
  font-size: var(--cito-font-size-400);
}

.cito-datalist-wrapper input:focus-visible {
  outline: 0.125rem solid var(--cito-text-800);
  border-color: var(--cito-ui-600);
}

.cito-datalist-wrapper input::placeholder {
  color: var(--cito-text-600);
}

/******************************************************************************
 * Public: hr
 *****************************************************************************/

hr {
  border: none;
  border-top: 0.0625rem solid var(--cito-ui-400);
  margin: 1rem 0;
}