@use 'utils';

@mixin tokens {
  /* TEXT TOKENS */

  --color-text-primary: var(--color-grey-950);
  --color-text-secondary: var(--color-grey-600);
  --color-text-tertiary: var(--color-grey-500);
  --color-text-on-inverted: var(--color-white);
  --color-text-brand: var(--color-indigo-700);
  --color-text-brand-soft: color-mix(
    in oklab,
    var(--color-text-primary),
    var(--color-text-brand)
  );
  --color-text-on-brand-base: var(--color-white);
  --color-text-brand-on-inverted: var(--color-indigo-400);
  --color-text-error: var(--color-red-800);
  --color-text-on-error-base: var(--color-white);
  --color-text-warning: var(--color-yellow-600);
  --color-text-on-warning-base: var(--color-white);
  --color-text-success: var(--color-green-600);
  --color-text-on-success-base: var(--color-white);
  --color-text-disabled: var(--color-grey-300);
  --color-text-on-disabled: var(--color-grey-200);
  --color-text-bookmark-highlight: var(--color-text-error);
  --color-text-favourite-highlight: var(--color-text-warning);
  --color-text-on-media: var(--color-white);
  --color-text-status-links: var(--color-text-brand);

  /* BACKGROUND TOKENS */

  // Neutrals
  --color-bg-primary: var(--color-white);
  --overlay-strength-secondary: 4%;
  --color-bg-secondary-base: #000550;
  --color-bg-secondary: #{color-mix(
      in oklab,
      var(--color-bg-primary),
      var(--color-bg-secondary-base) var(--overlay-strength-secondary)
    )};
  --color-bg-secondary-solid: #{color-mix(
      in srgb,
      var(--color-bg-primary),
      var(--color-bg-secondary-base) var(--overlay-strength-secondary)
    )};
  --color-bg-tertiary: #{color-mix(
      in oklab,
      var(--color-bg-primary),
      var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary))
    )};

  // Utility
  --color-bg-ambient: var(--color-bg-primary);
  --color-bg-inverted: var(--color-grey-950);
  --color-bg-media-base: var(--color-black);
  --color-bg-media-strength: 65%;
  --color-bg-media: #{utils.css-alpha(
      var(--color-bg-media-base),
      var(--color-bg-media-strength)
    )};
  --color-bg-overlay: var(--color-bg-primary);
  --color-bg-disabled: var(--color-grey-400);

  // Brand
  --overlay-strength-brand: 6%;
  --color-bg-brand-base: var(--color-indigo-700);
  --color-bg-brand-base-hover: color-mix(
    in oklab,
    var(--color-bg-brand-base),
    black var(--overlay-strength-brand)
  );
  --color-bg-brand-soft: #{utils.css-alpha(
      #0012d8,
      calc(var(--overlay-strength-brand) * 2)
    )};
  --color-bg-brand-softer: #{utils.css-alpha(
      #0012d8,
      var(--overlay-strength-brand)
    )};
  --color-bg-brand-softer-solid: color-mix(
    in srgb,
    var(--color-bg-primary),
    var(--color-bg-brand-base) var(--overlay-strength-brand)
  );

  // Error
  --overlay-strength-error: 5%;
  --color-bg-error-base: var(--color-red-800);
  --color-bg-error-base-hover: color-mix(
    in oklab,
    var(--color-bg-error-base),
    black var(--overlay-strength-error)
  );
  --color-bg-error-soft: var(--color-red-100);
  --color-bg-error-softer: var(--color-red-50);

  // Warning
  --overlay-strength-warning: 10%;
  --color-bg-warning-base: var(--color-yellow-700);
  --color-bg-warning-base-hover: color-mix(
    in oklab,
    var(--color-bg-warning-base),
    black var(--overlay-strength-warning)
  );
  --color-bg-warning-soft: var(--color-yellow-100);
  --color-bg-warning-softer: var(--color-yellow-50);

  // Success
  --overlay-strength-success: 15%;
  --color-bg-success-base: var(--color-green-600);
  --color-bg-success-base-hover: color-mix(
    in oklab,
    var(--color-bg-success-base),
    black var(--overlay-strength-success)
  );
  --color-bg-success-soft: var(--color-green-100);
  --color-bg-success-softer: var(--color-green-50);

  /* BORDER TOKENS */

  --border-strength-primary: 15%;
  --color-border-primary: color-mix(
    in oklab,
    var(--color-bg-primary),
    var(--color-grey-950) var(--border-strength-primary)
  );
  --color-border-media: rgb(252 248 255 / 15%);
  --color-border-verified: rgb(220, 3, 240);
  --color-border-on-bg-secondary: var(--color-grey-200);
  --color-border-on-bg-brand-softer: var(--color-indigo-200);
  --color-border-on-bg-error-softer: #{utils.css-alpha(
      var(--color-text-error),
      50%
    )};
  --color-border-on-bg-warning-softer: #{utils.css-alpha(
      var(--color-text-warning),
      50%
    )};
  --color-border-on-bg-success-softer: #{utils.css-alpha(
      var(--color-text-success),
      50%
    )};
  --color-border-on-bg-inverted: var(--color-border-primary);

  /* SHADOW TOKENS */

  --shadow-strength-primary: 30%;
  --color-shadow-primary: #{utils.css-alpha(
      var(--color-black),
      var(--shadow-strength-primary)
    )};
  --dropdown-shadow:
    0 20px 25px -5px var(--color-shadow-primary),
    0 8px 10px -6px var(--color-shadow-primary);
  --overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));

  /* GRAPHS/CHARTS TOKENS */

  --color-graph-primary-stroke: var(--color-text-brand);
  --color-graph-primary-fill: var(--color-bg-brand-softer);
  --color-graph-warning-stroke: var(--color-text-warning);
  --color-graph-warning-fill: var(--color-bg-warning-softer);
  --color-graph-disabled-stroke: var(--color-text-disabled);
  --color-graph-disabled-fill: var(--color-bg-disabled);

  /* LEGACY TOKENS */

  --rich-text-container-color: rgb(255 216 231 / 100%);
  --rich-text-text-color: rgb(114 47 83 / 100%);
  --rich-text-decorations-color: rgb(255 175 212 / 100%);
}

@mixin contrast-overrides {
  /* TEXT TOKENS */

  --color-text-primary: var(--color-black);
  --color-text-secondary: var(--color-grey-800);
  --color-text-tertiary: var(--color-grey-700);
  --color-text-brand: var(--color-indigo-600);

  /* BORDER TOKENS */

  --border-strength-primary: 30%;
  --color-border-on-bg-secondary: var(--color-grey-300);
}