/*
 * knobs design tokens, generated by tokens/build.mjs from tokens/tokens.json.
 * Don't edit this file: change tokens.json and run `node tokens/build.mjs`.
 * SPDX-License-Identifier: GPL-2.0-or-later
 *
 * The dark scheme is the default, on :root. The light scheme follows the
 * system setting unless the root element has data-theme="dark", and
 * data-theme="light" picks it whatever the system says, so a toggle that
 * sets data-theme wins either way. A role both schemes share is set once,
 * on :root. The app's state marks (status in tokens.json) belong to the
 * app and aren't declared here.
 */

:root {
  color-scheme: dark;

  /* Brand colours */
  --brand-graphite:     #191b1d; /* oklch(0.22 0.006 260) */
  --brand-ink:          #e5ecf6; /* oklch(0.94 0.016 260) */
  --brand-cap-red:      #df695e; /* oklch(0.66 0.15 27.3) */
  --brand-cap-red-deep: #c55149; /* oklch(0.585 0.15 26.7) */
  --brand-white:        #ffffff; /* oklch(1 0 0) */
  --brand-black:        #000000; /* oklch(0 0 0) */

  /* Neutral ramps, by OKLCH lightness in thousandths */
  --neutral-dark-162:   #0c0e10; /* oklch(0.162 0.006 260) */
  --neutral-dark-195:   #131518; /* oklch(0.195 0.006 260) */
  --neutral-dark-220:   #191b1d; /* --brand-graphite */
  --neutral-dark-250:   #202225; /* oklch(0.25 0.007 260) */
  --neutral-dark-275:   #25282c; /* oklch(0.275 0.008 260) */
  --neutral-dark-305:   #2d2f33; /* oklch(0.305 0.008 260) */
  --neutral-dark-375:   #3e4146; /* oklch(0.375 0.01 260) */
  --neutral-dark-510:   #62666d; /* oklch(0.51 0.012 260) */
  --neutral-dark-670:   #90969e; /* oklch(0.67 0.014 260) */
  --neutral-dark-800:   #b9bec7; /* oklch(0.80 0.014 260) */
  --neutral-dark-940:   #e5ecf6; /* --brand-ink */
  --neutral-light-420:  #494d55; /* oklch(0.42 0.014 260) */
  --neutral-light-490:  #5c6169; /* oklch(0.49 0.014 260) */
  --neutral-light-595:  #787f8b; /* oklch(0.595 0.02 260) */
  --neutral-light-780:  #b3b8c0; /* oklch(0.78 0.013 260) */
  --neutral-light-870:  #d0d4dc; /* oklch(0.87 0.011 260) */
  --neutral-light-925:  #e3e6ec; /* oklch(0.925 0.009 260) */
  --neutral-light-935:  #e6eaef; /* oklch(0.935 0.008 260) */
  --neutral-light-955:  #eef0f4; /* oklch(0.955 0.006 260) */
  --neutral-light-972:  #f4f6f8; /* oklch(0.972 0.004 260) */
  --neutral-light-1000: #ffffff; /* --brand-white */

  /* Type */
  --font-sans:        "Radio Canada", "Radio Canada Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display:     "Radio Canada Condensed", "Radio Canada", "Radio Canada Fallback", system-ui, sans-serif;
  --font-mono:        "Source Code Pro", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --size-display:     clamp(2.25rem, 5.84vw, 5.5rem);
  --size-title:       clamp(2.125rem, 1.25rem + 2.2vw, 3.25rem);
  --size-heading:     1.25rem;
  --size-subheading:  1.1875rem;
  --size-lede:        1.125rem;
  --size-body:        1rem;
  --size-md:          0.9375rem;
  --size-sm:          0.875rem;
  --size-xs:          0.8125rem;
  --leading-display:  0.9;
  --leading-title:    1.02;
  --leading-heading:  1.3;
  --leading-lede:     1.5;
  --leading-body:     1.55;
  --tracking-display: -0.01em;
  --tracking-title:   -0.005em;
  --tracking-heading: -0.005em;

  /* Geometry */
  --radius:       0px;
  --hairline:     1px;
  --focus-width:  2px;
  --focus-offset: 2px;
  --dot:          9px;

  /* Motion */
  --ease:            cubic-bezier(0.2, 0, 0, 1);
  --duration-fast:   160ms;
  --duration-slow:   320ms;
  --duration-breath: 1600ms;
  --rise:            4px;

  /* Colour by role: dark */
  --ground:           #191b1d; /* --brand-graphite */
  --ground-deep:      #0c0e10; /* --neutral-dark-162 */
  --raised:           #202225; /* --neutral-dark-250 */
  --raised-2:         #25282c; /* --neutral-dark-275 */
  --sunken:           #131518; /* --neutral-dark-195 */
  --screen:           #131518; /* --neutral-dark-195 */
  --line:             #2d2f33; /* --neutral-dark-305 */
  --line-strong:      #3e4146; /* --neutral-dark-375 */
  --text:             #e5ecf6; /* --brand-ink */
  --text-2:           #b9bec7; /* --neutral-dark-800 */
  --text-3:           #90969e; /* --neutral-dark-670 */
  --action:           #df695e; /* --brand-cap-red */
  --action-hover:     #e8796d; /* oklch(0.70 0.14 27.3) */
  --action-text:      #df695e; /* --brand-cap-red */
  --on-action:        #191b1d; /* --brand-graphite */
  --link-underline:   #df695e; /* --action */
  --link-hover:       #df695e; /* --action-text */
  --focus:            #df695e; /* --action */
  --selection:        #7a342e; /* oklch(0.42 0.10 27.3) */
  --band:             #df695e; /* --brand-cap-red */
  --band-line:        #b54b42; /* oklch(0.55 0.14 27.3) */
  --band-line-strong: #822c26; /* oklch(0.42 0.12 27.3) */
  --on-band:          #191b1d; /* --brand-graphite */
  --band-selection:   #efbcb7; /* oklch(0.84 0.06 25) */
  --band-focus:       #191b1d; /* --brand-graphite */
  --chart-knobs:      #df695e; /* --brand-cap-red */
  --chart-obs:        #62666d; /* --neutral-dark-510 */
}

/* Colour by role: light, from the system setting */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ground:           #eef0f4; /* --neutral-light-955 */
    --ground-deep:      #e3e6ec; /* --neutral-light-925 */
    --raised:           #ffffff; /* --brand-white */
    --raised-2:         #f4f6f8; /* --neutral-light-972 */
    --sunken:           #e6eaef; /* --neutral-light-935 */
    --screen:           #ffffff; /* --brand-white */
    --line:             #d0d4dc; /* --neutral-light-870 */
    --line-strong:      #b3b8c0; /* --neutral-light-780 */
    --text:             #191b1d; /* --brand-graphite */
    --text-2:           #494d55; /* --neutral-light-420 */
    --text-3:           #5c6169; /* --neutral-light-490 */
    --action:           #c55149; /* --brand-cap-red-deep */
    --action-hover:     #b2403a; /* oklch(0.53 0.15 26.7) */
    --action-text:      #ab3a34; /* oklch(0.51 0.15 26.7) */
    --on-action:        #ffffff; /* --brand-white */
    --link-underline:   #c55149; /* --action */
    --link-hover:       #ab3a34; /* --action-text */
    --focus:            #c55149; /* --action */
    --selection:        #f7ccc6; /* oklch(0.88 0.05 26.7) */
    --band:             #c55149; /* --brand-cap-red-deep */
    --band-line:        #d97e75; /* oklch(0.69 0.115 26.7) */
    --band-line-strong: #efbcb7; /* oklch(0.84 0.06 25) */
    --on-band:          #ffffff; /* --brand-white */
    --band-selection:   #7c2622; /* oklch(0.40 0.12 26.7) */
    --band-focus:       #ffffff; /* --brand-white */
    --chart-knobs:      #c55149; /* --brand-cap-red-deep */
    --chart-obs:        #787f8b; /* --neutral-light-595 */
  }
}

/* Colour by role: light, chosen on the page */
:root[data-theme="light"] {
  color-scheme: light;
  --ground:           #eef0f4; /* --neutral-light-955 */
  --ground-deep:      #e3e6ec; /* --neutral-light-925 */
  --raised:           #ffffff; /* --brand-white */
  --raised-2:         #f4f6f8; /* --neutral-light-972 */
  --sunken:           #e6eaef; /* --neutral-light-935 */
  --screen:           #ffffff; /* --brand-white */
  --line:             #d0d4dc; /* --neutral-light-870 */
  --line-strong:      #b3b8c0; /* --neutral-light-780 */
  --text:             #191b1d; /* --brand-graphite */
  --text-2:           #494d55; /* --neutral-light-420 */
  --text-3:           #5c6169; /* --neutral-light-490 */
  --action:           #c55149; /* --brand-cap-red-deep */
  --action-hover:     #b2403a; /* oklch(0.53 0.15 26.7) */
  --action-text:      #ab3a34; /* oklch(0.51 0.15 26.7) */
  --on-action:        #ffffff; /* --brand-white */
  --link-underline:   #c55149; /* --action */
  --link-hover:       #ab3a34; /* --action-text */
  --focus:            #c55149; /* --action */
  --selection:        #f7ccc6; /* oklch(0.88 0.05 26.7) */
  --band:             #c55149; /* --brand-cap-red-deep */
  --band-line:        #d97e75; /* oklch(0.69 0.115 26.7) */
  --band-line-strong: #efbcb7; /* oklch(0.84 0.06 25) */
  --on-band:          #ffffff; /* --brand-white */
  --band-selection:   #7c2622; /* oklch(0.40 0.12 26.7) */
  --band-focus:       #ffffff; /* --brand-white */
  --chart-knobs:      #c55149; /* --brand-cap-red-deep */
  --chart-obs:        #787f8b; /* --neutral-light-595 */
}