/* ============================================================================
   Kabason Lab — design tokens

   Every colour here is sampled from docs/assets/logo.png:
     cyan #01AEF0 · navy #003B67 · green #1DA42B · orange #EA6D12

   The raw cyan and orange fail WCAG on light backgrounds (2.35:1 and 2.92:1),
   so each hue has a light ramp and a dark ramp. Contrast ratios against that
   scheme's ground are noted inline; everything is AA or better.

   This file defines the palette and bridges it onto the Material variables.
   Component styling lives in base.css and rack.css.
   ========================================================================= */

:root {
  --k-display: "Archivo", system-ui, -apple-system, sans-serif;
  --k-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --k-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;

  /* the rack is dark in both schemes, because equipment is dark */
  --k-led-green: #35C243;
  --k-led-orange: #EA6D12;

  --k-measure: 76ch;
}

/* ---------------------------------------------------------------- light -- */
[data-md-color-scheme="default"] {
  --k-ground: #F4F7FA;
  --k-surface: #FFFFFF;
  --k-ink: #0C1B26;          /* 16.3 */
  --k-muted: #5B6B79;        /*  5.1 */
  --k-rule: #D5DFE8;
  --k-navy: #003B67;         /* 10.7 */
  --k-cyan: #0B6FA4;         /*  5.1 */
  --k-orange: #B85209;       /*  4.6 */
  --k-green: #15801F;        /*  4.7 */

  --k-chassis: #04121E;
  --k-chassis-face: #0A2033;
  --k-chassis-rule: #16324A;
  --k-chassis-edge: #16324A;
  --k-chassis-ink: #E6EDF3;
  --k-chassis-mute: #8FA3B4;
  --k-led-off: #1E3A52;

  --k-shadow: 0 1px 2px rgba(0, 59, 103, .06), 0 8px 28px rgba(0, 59, 103, .08);
}

/* ----------------------------------------------------------------- dark -- */
[data-md-color-scheme="slate"] {
  --k-ground: #04121E;
  --k-surface: #0A2033;
  --k-ink: #E6EDF3;          /* 16.0 */
  --k-muted: #8FA3B4;        /*  7.3 */
  --k-rule: #16324A;
  --k-navy: #003B67;
  --k-cyan: #01AEF0;         /*  7.5 */
  --k-orange: #EA6D12;       /*  6.0 */
  --k-green: #35C243;        /*  8.1 */

  --k-chassis: #0A2436;
  --k-chassis-face: #12354D;
  --k-chassis-rule: #1E4B6B;
  --k-chassis-edge: #2A6389;
  --k-chassis-ink: #E6EDF3;
  --k-chassis-mute: #8FA3B4;
  --k-led-off: #1E3A52;

  --k-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 34px rgba(0, 0, 0, .55);
}

/* ============================================================================
   Bridge onto Material's variables.

   `primary: custom` / `accent: custom` in mkdocs.yml is what makes the theme
   look for these two attribute selectors.
   ========================================================================= */

[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--k-navy);
  --md-primary-fg-color--light: #0A5289;
  --md-primary-fg-color--dark: #002B4C;
  --md-primary-bg-color: #FFFFFF;
  --md-primary-bg-color--light: rgba(255, 255, 255, .75);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--k-orange);
  --md-accent-fg-color--transparent: rgba(234, 109, 18, .1);
  --md-accent-bg-color: #FFFFFF;
  --md-accent-bg-color--light: rgba(255, 255, 255, .75);
}

[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--k-ground);
  --md-default-fg-color: var(--k-ink);
  --md-typeset-color: var(--k-ink);
  --md-typeset-a-color: var(--k-cyan);

  --md-code-bg-color: var(--k-surface);
  --md-code-fg-color: var(--k-ink);

  --md-footer-bg-color: var(--k-navy);
  --md-footer-bg-color--dark: #002B4C;

  --md-typeset-mark-color: rgba(1, 174, 240, .28);
  --md-typeset-del-color: rgba(234, 109, 18, .2);
  --md-typeset-ins-color: rgba(53, 194, 67, .2);
}

[data-md-color-scheme="default"] {
  --md-default-fg-color--light: #3C4C59;
  --md-default-fg-color--lighter: var(--k-muted);
  --md-default-fg-color--lightest: var(--k-rule);
  --md-code-hl-comment-color: #67788A;
}

[data-md-color-scheme="slate"] {
  --md-default-fg-color--light: #C3D0DB;
  --md-default-fg-color--lighter: var(--k-muted);
  --md-default-fg-color--lightest: var(--k-rule);
  --md-code-hl-comment-color: #6E8CA3;
}