/* Catppuccin, limited to Latte and Mocha (docs/architecture/design-system.md).

   This file carries tokens and nothing else. Component styling lives in the
   component's own scoped stylesheet, so a colour decision is made once here and
   a layout decision is made once next to the markup that needs it.

   Three declarations per flavor, in this order, so both the operating system
   preference and an explicit override resolve correctly:
     :root                                    the light flavor, always defined
     @media (prefers-color-scheme: dark)      the system preference, unless the
       :root:not([data-theme="light"])        visitor asked for light
     :root[data-theme="dark"]                 the visitor asked for dark */

:root,
:root[data-theme="light"] {
  /* Catppuccin Latte */
  --ctp-mauve:    #8839ef;
  --ctp-red:      #d20f39;
  --ctp-green:    #40a02b;
  --ctp-yellow:   #df8e1d;
  --ctp-text:     #4c4f69;
  --ctp-subtext1: #5c5f77;
  --ctp-subtext0: #6c6f85;
  --ctp-overlay1: #8c8fa1;
  --ctp-overlay0: #9ca0b0;
  --ctp-surface2: #acb0be;
  --ctp-surface1: #bcc0cc;
  --ctp-surface0: #ccd0da;
  --ctp-base:     #eff1f5;
  --ctp-mantle:   #e6e9ef;
  --ctp-crust:    #dce0e8;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Catppuccin Mocha */
    --ctp-mauve:    #cba6f7;
    --ctp-red:      #f38ba8;
    --ctp-green:    #a6e3a1;
    --ctp-yellow:   #f9e2af;
    --ctp-text:     #cdd6f4;
    --ctp-subtext1: #bac2de;
    --ctp-subtext0: #a6adc8;
    --ctp-overlay1: #7f849c;
    --ctp-overlay0: #6c7086;
    --ctp-surface2: #585b70;
    --ctp-surface1: #45475a;
    --ctp-surface0: #313244;
    --ctp-base:     #1e1e2e;
    --ctp-mantle:   #181825;
    --ctp-crust:    #11111b;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  /* Catppuccin Mocha */
  --ctp-mauve:    #cba6f7;
  --ctp-red:      #f38ba8;
  --ctp-green:    #a6e3a1;
  --ctp-yellow:   #f9e2af;
  --ctp-text:     #cdd6f4;
  --ctp-subtext1: #bac2de;
  --ctp-subtext0: #a6adc8;
  --ctp-overlay1: #7f849c;
  --ctp-overlay0: #6c7086;
  --ctp-surface2: #585b70;
  --ctp-surface1: #45475a;
  --ctp-surface0: #313244;
  --ctp-base:     #1e1e2e;
  --ctp-mantle:   #181825;
  --ctp-crust:    #11111b;
  color-scheme: dark;
}

/* The semantic layer is declared once and resolves against whichever flavor is
   active. Background stacking follows Catppuccin's own convention — crust for
   bars, mantle for the page, base for cards — which inverts by luminance in
   Latte and produces a conventional light theme either way: the card always
   contrasts with the page behind it. */
:root {
  --bg: var(--ctp-mantle);
  --bg-deep: var(--ctp-crust);

  --surface: var(--ctp-base);
  --surface-raised: var(--ctp-crust);
  --surface-high: var(--ctp-surface0);

  /* A light field on a light panel, told apart by its border: surface0 and
     surface1 are too strong as grays to carry AA text in Latte. */
  --field-bg: var(--ctp-base);

  --text: var(--ctp-text);
  --text-muted: var(--ctp-subtext1);
  /* Raw subtext0 reaches only 4.06:1 on mantle. Pulling it toward --text keeps a
     third level of hierarchy without dropping below 4.5:1. */
  --text-subtle: color-mix(in srgb, var(--ctp-subtext0) 70%, var(--ctp-text));

  --border: var(--ctp-surface0);
  --border-strong: var(--ctp-surface1);

  --accent: var(--ctp-mauve);
  --accent-hover: color-mix(in srgb, var(--ctp-mauve) 82%, var(--ctp-text));
  --accent-contrast: var(--ctp-base);
  --accent-text: color-mix(in srgb, var(--ctp-mauve) 88%, var(--ctp-text));
  --accent-soft: color-mix(in srgb, var(--ctp-mauve) 16%, var(--ctp-base));

  --danger: var(--ctp-red);
  --danger-soft: color-mix(in srgb, var(--ctp-red) 14%, var(--ctp-base));
  --danger-text: color-mix(in srgb, var(--ctp-red) 84%, var(--ctp-text));

  --warning: var(--ctp-yellow);
  --warning-soft: color-mix(in srgb, var(--ctp-yellow) 14%, var(--ctp-base));
  --warning-text: color-mix(in srgb, var(--ctp-yellow) 84%, var(--ctp-text));

  --success: var(--ctp-green);
  --success-soft: color-mix(in srgb, var(--ctp-green) 14%, var(--ctp-base));
  --success-text: color-mix(in srgb, var(--ctp-green) 84%, var(--ctp-text));

  /* A rise, read on a raised surface rather than on the page. --success-text is
     mixed for the page ground and falls under AA on a row or a tile, where 45%
     green holds only 4.13:1 and 30% holds 4.71:1. Mocha takes the flavor color
     itself, as the other tone texts do. */
  --up-text: color-mix(in srgb, var(--ctp-green) 30%, var(--ctp-text));

  /* The light that sweeps across a catalog cover on hover: the flavor's
     lightest neutral, half see-through, so the art shows under it. */
  --cover-sheen: color-mix(in srgb, var(--ctp-base) 45%, transparent);

  /* Words laid over a picture, such as a title on a home page tile, and the
     shade under them that keeps them legible. A picture is not themed, so both
     are the same in either flavor: Latte's base on Mocha's crust. */
  --on-picture: #eff1f5;
  --picture-shade: #11111b;

  --radius: 10px;
  --radius-sm: 7px;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;

  /* How far apart an uppercase label spaces its letters, as a multiple of the
     label's own spacing: letter-spacing: calc(.08em * var(--label-tracking)). */
  --label-tracking: 1;
}

/* Spacing letters apart breaks the joins of Arabic script, pulls Thai vowel and
   tone marks off their consonants, and has no place in Chinese, Japanese or
   Korean; none of these scripts has capitals to set apart. */
:lang(ar),
:lang(ja),
:lang(ko),
:lang(th),
:lang(zh) {
  --label-tracking: 0;
}

/* Mocha needs lighter hues against its dark ground than the mixes above
   produce, so every derivation that has to read as text is re-pointed. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent-hover: color-mix(in srgb, var(--ctp-mauve) 82%, var(--ctp-base));
    --accent-contrast: var(--ctp-crust);
    --accent-text: var(--ctp-mauve);
    --danger-text: var(--ctp-red);
    --warning-text: var(--ctp-yellow);
    --success-text: var(--ctp-green);
    --up-text: var(--ctp-green);
    --cover-sheen: color-mix(in srgb, var(--ctp-text) 30%, transparent);
  }
}

:root[data-theme="dark"] {
  --accent-hover: color-mix(in srgb, var(--ctp-mauve) 82%, var(--ctp-base));
  --accent-contrast: var(--ctp-crust);
  --accent-text: var(--ctp-mauve);
  --danger-text: var(--ctp-red);
  --warning-text: var(--ctp-yellow);
  --success-text: var(--ctp-green);
  --up-text: var(--ctp-green);
  --cover-sheen: color-mix(in srgb, var(--ctp-text) 30%, transparent);
}