:root {
   /* ----------------------------------------------------------------
    * ! COLOR */
    
  --color--gray-900: oklch(35% 0 250);
  
  /* Text */
  --color--max-text: #000;
  --color--aaa-high-contrast-text: #434343;
  --color--aaa-text: #595959;
  --color--aa-text: #767676;
  --color--text: var(--color--aa-text);
  --color--text-inverse: var(--color--bg-max);
  
  /* Backgrounds */
  --color--bg-max: white;
  --color--bg-base: #fcfcfc;
  --color--bg-1: #f8f8f8;
  --color--bg-2: #e5e5e5;

  /* Borders */
  --color--border-low-contrast: #EBEBEB;
  --color--border-mid-contrast: #CCCCCC;
  
  /* Other */
  --color--a11y-icon: hsl(337, 79%, 61%);
  --color--not-a11y-icon: #FF76BF;
  --color--primary-base: blue;
  --color--primary-dark: var(--color--max-text);
  
  --color--link: var(--color--max-text);
  --color--link-hover: var(--color--max-text);

  /* Star */
  --color--star: oklch(0.88 0.15 90);
  --color--star-inactive: oklch(0.90 0 90);
  --color--star-inactive-hover: oklch(0.80 0.01 90);
  
  
  /* ----------------------------------------------------------------
   * ! FONTS */
  
  --font-family--body: system-ui, "Inter", "Helvetica", "Arial", sans-serif;
  --font-family--mono: ui-monospace, Menlo, monospace !important;
  
  /* Size */
  --font-size--body:  0.875rem;
  --font-size--small: 0.875rem;
  --font-size--ui:    0.875rem;
  
  /* Weight */
  --font-weight--light:  300;
  --font-weight--normal: 400;
  --font-weight--medium: 500;
  --font-weight--bold:   700;
  
  --line-height--base: 1.5;
  
  /* ----------------------------------------------------------------
   * ! BORDERS */
  
  --border-radius--base: 0.5rem;
  --border-radius--circle: 100%;
  
  --border-width--base: 1px;
  --border-width--thick: 4px;
  
  --border--base:  var(--border-width--base) solid var(--color--border-mid-contrast);
  --border--light: var(--border-width--base) solid var(--color--border-low-contrast);
  
  
  /* ----------------------------------------------------------------
   * ! SPACE */
  
  --container--base: 44rem;
  
  --space--xx-small: 0.25rem;
  --space--x-small:  0.5rem;
  --space--small:    0.75rem;
  --space--base:     1rem;
  --space--medium:   1.5rem;
  --space--large:    2rem;
  --input-padding: var(--space--base);
  
  /* ----------------------------------------------------------------
   * ! Transition */
   
  --transition-duration--base: 0.2s;
  --transition-timing--base: ease-in-out;
}


@media (prefers-color-scheme: dark) {
  :root {
    /* ----------------------------------------------------------------
     * ! COLOR */
    
    --color--gray-900: oklch(25% 0 250);
    --color--blue-900: oklch(20% 0.05 250);
    
    /* Text */
    --color--max-text: #FFF;
    --color--aaa-high-contrast-text: oklch(88% 0 0);
    --color--aaa-text: oklch(72.52% 0 0);
    --color--aa-text: oklch(60.66% 0 0);
    --color--aaa-text-critical: #ff4482;
    --color--text: var(--color--aaa-text);
    --color--text-inverse: var(--color--bg-max);
    
    /* Backgrounds */
    --color--bg-max: black;
    --color--bg-base: #0F0F0F;
    --color--bg-1: #1A1A1A;
    --color--bg-2: #2e2e2e;
    --color--bg-light: var(--color--gray-900);
    --color--bg-x-light: var(--color--blue-900);

    /* Borders */
    --color--border-low-contrast: #313131;
    --color--border-mid-contrast: #666666;
    
    /* Other */
    --color--a11y-icon: hsl(337, 79%, 71%);
    --color--not-a11y-icon: #FFB3E0;
    --color--primary-base: #6bffd6;
    --color--primary-dark: #4ae9bd;
    --color--primary-light: var(--color--blue-900);
    
    --color--link: var(--color--aaa-text);
    --color--link-hover: white;

    /* Star */
    --color--star: oklch(0.85 0.18 90);
    --color--star-inactive: var(--color--border-mid-contrast);
    --color--star-inactive-hover: var(--color--aa-text);
    
    
    /* ----------------------------------------------------------------
     * BORDERS */
    
    --border--base: var(--border-width--base) solid var(--color--border-mid-contrast);
    --border--light: var(--border-width--base) solid var(--color--gray-900);

  }
}