/* ==================== */
/*   __  __ _   _ ___   */
/*  |  \/  | | | |_ _|  */
/*  | |\/| | | | || |   */
/*  | |  | | |_| || |   */
/*  |_|  |_|\___/|___|  */
/*                      */
/*   michael.ui.system  */
/* ==================== */

/* PLAIN BRAND */
/* =============================================================================== */
/* 1. BRAND PRIMITIVES                                                             */
/* =============================================================================== */
html[data-brand='mono'] {
  --font-family: 'Courier New';
  /* Greyscale Palette */
  --mono-white: #ffffff;
  --mono-black: #000000;
  /* Neutral Greys */
  --mono-grey-100: #f5f5f5;
  --mono-grey-200: #e0e0e0;
  --mono-grey-300: #c2c2c2;
  --mono-grey-400: #a3a3a3;
  --mono-grey-500: #8a8a8a;
  --mono-grey-600: #707070;
  --mono-grey-700: #494949;
  --mono-grey-800: #2c2c2c;
  --mono-grey-900: #1a1a1a;
}

/* =============================================================================== */
/* 2. LIGHT MODE                                                                   */
/* =============================================================================== */
html[data-brand='mono'][data-theme='light'] {
  /* Feedback */
  --feedback-plain-border-color: var(--black-opacity-20);
  --feedback-neutral-border-color: var(--mono-grey-300);
  --feedback-positive-border-color: var(--mono-grey-300);
  --feedback-info-border-color: var(--mono-grey-300);
  --feedback-warning-border-color: var(--mono-grey-300);
  --feedback-attention-border-color: var(--mono-grey-300);

  --feedback-plain-background: var(--white-opacity-20);
  --feedback-neutral-background: var(--mono-grey-100);
  --feedback-positive-background: var(--mono-grey-100);
  --feedback-info-background: var(--mono-grey-100);
  --feedback-warning-background: var(--mono-grey-100);
  --feedback-attention-background: var(--mono-grey-100);

  --feedback-plain-icon: var(--black-opacity-60);
  --feedback-neutral-icon: var(--mono-black);
  --feedback-positive-icon: var(--mono-black);
  --feedback-info-icon: var(--mono-black);
  --feedback-warning-icon: var(--mono-black);
  --feedback-attention-icon: var(--mono-black);
  --feedback-plain-text: var(--mono-black);
  --feedback-neutral-text: var(--mono-black);
  --feedback-positive-text: var(--mono-black);
  --feedback-info-text: var(--mono-black);
  --feedback-warning-text: var(--mono-black);
  --feedback-attention-text: var(--mono-black);

  --action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-700);
  --action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-900);
  --action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-900);
  --action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-900);
  --action-primary-background: var(--mono-grey-700);
  --action-primary-background-hover: var(--mono-grey-900);
  --action-primary-background-focus: var(--mono-grey-900);
  --action-primary-background-disabled: var(--mono-grey-900);
  --action-primary-text-color: var(--mono-white);
  --action-primary-text-color-hover: var(--mono-white);
  --action-primary-text-color-focus: var(--mono-white);
  --action-primary-text-color-disabled: var(--mono-white);

  --action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-600);
  --action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-900);
  --action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-900);
  --action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-900);
  --action-secondary-background: var(--white-opacity-0);
  --action-secondary-background-hover: var(--white-opacity-0);
  --action-secondary-background-focus: var(--white-opacity-0);
  --action-secondary-background-disabled: var(--white-opacity-0);
  --action-secondary-text-color: var(--mono-grey-600);
  --action-secondary-text-color-hover: var(--mono-grey-900);
  --action-secondary-text-color-focus: var(--mono-grey-900);
  --action-secondary-text-color-disabled: var(--mono-grey-900);

  --action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
  --action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
  --action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
  --action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
  --action-tertiary-background: var(--white-opacity-0);
  --action-tertiary-background-hover: var(--mono-grey-100);
  --action-tertiary-background-focus: var(--mono-grey-100);
  --action-tertiary-background-disabled: var(--mono-grey-100);
  --action-tertiary-text-color: var(--mono-grey-600);
  --action-tertiary-text-color-hover: var(--mono-grey-900);
  --action-tertiary-text-color-focus: var(--mono-grey-900);
  --action-tertiary-text-color-disabled: var(--mono-grey-900);

  --action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--mono-black);
  --action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--mono-black);
  --action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--mono-black);
  --action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--mono-black);
  --action-attention-background: var(--mono-black);
  --action-attention-background-hover: var(--mono-grey-900);
  --action-attention-background-focus: var(--mono-grey-900);
  --action-attention-background-disabled: var(--mono-grey-700);
  --action-attention-text-color: var(--mono-white);
  --action-attention-text-color-hover: var(--mono-white);
  --action-attention-text-color-focus: var(--mono-white);
  --action-attention-text-color-disabled: var(--mono-white);

  /* Badge */
  --badge-text-color: var(--mono-white);
  --badge-background-neutral: var(--mono-grey-400);
  --badge-background-positive: var(--mono-grey-700);
  --badge-background-warning: var(--mono-black);
  --badge-background-attention: var(--mono-black);

  /* Outline (Focus) */
  --outline-color: var(--mono-black);

  /* Icon */
  --icon-color-default: var(--mono-black);
  --icon-color-inverted: var(--mono-white);

  /* Type */
  --text-color: var(--mono-black);
  --heading-text-color: var(--mono-black);

  /* Input */
  --input-background: var(--mono-white);

  /* Border */
  --border-color: var(--black-opacity-20);

  /* Surface */
  --surface: var(--mono-grey-200);
  --surface-elevated-alpha: var(--white-opacity-50);
  --surface-elevated-100: var(--white);
  --surface-elevated-200: var(--mono-grey-100);
  --surface-recessed-alpha: var(--black-opacity-10);
  --surface-recessed-100: var(--mono-grey-300);
  --surface-recessed-200: var(--mono-grey-400);

  /* Switch */
  --switch-track-background: var(--mono-grey-300);
  --switch-track-background-checked: var(--mono-black);

  /* Tabs */
  --tab-border-color: var(--mono-grey-500);

  --tab-background: var(--mono-grey-100);
  --tab-icon: var(--mono-grey-900);
  --tab-text-color: var(--mono-grey-900);

  --tab-background-active: var(--mono-grey-900);
  --tab-icon-active: var(--mono-grey-100);
  --tab-text-color-active: var(--mono-grey-100);
  --tab-shadow-active: var(--mono-grey-200);

  /* Carousel */
  --carousel-background: var(--mono-grey-100);
}

/* =============================================================================== */
/* 3. DARK MODE                                                                    */
/* =============================================================================== */
html[data-brand='mono'][data-theme='dark'] {
  /* Feedback */
  --feedback-plain-border-color: var(--white-opacity-20);
  --feedback-neutral-border-color: var(--mono-grey-300);
  --feedback-positive-border-color: var(--mono-grey-300);
  --feedback-info-border-color: var(--mono-grey-300);
  --feedback-warning-border-color: var(--mono-grey-300);
  --feedback-attention-border-color: var(--mono-grey-300);

  --feedback-plain-background: var(--black-opacity-20);
  --feedback-neutral-background: var(--mono-grey-900);
  --feedback-positive-background: var(--mono-grey-900);
  --feedback-info-background: var(--mono-grey-900);
  --feedback-warning-background: var(--mono-grey-900);
  --feedback-attention-background: var(--mono-grey-900);

  --feedback-plain-icon: var(--white-opacity-60);
  --feedback-neutral-icon: var(--mono-grey-100);
  --feedback-positive-icon: var(--mono-grey-100);
  --feedback-info-icon: var(--mono-grey-100);
  --feedback-warning-icon: var(--mono-grey-100);
  --feedback-attention-icon: var(--mono-grey-100);
  --feedback-plain-text: var(--mono-white);
  --feedback-neutral-text: var(--mono-white);
  --feedback-positive-text: var(--mono-white);
  --feedback-info-text: var(--mono-white);
  --feedback-warning-text: var(--mono-white);
  --feedback-attention-text: var(--mono-white);

  --action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-200);
  --action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-100);
  --action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-100);
  --action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-100);
  --action-primary-background: var(--mono-grey-200);
  --action-primary-background-hover: var(--mono-grey-100);
  --action-primary-background-focus: var(--mono-grey-100);
  --action-primary-background-disabled: var(--mono-grey-100);
  --action-primary-text-color: var(--mono-black);
  --action-primary-text-color-hover: var(--mono-black);
  --action-primary-text-color-focus: var(--mono-black);
  --action-primary-text-color-disabled: var(--mono-black);

  --action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-200);
  --action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-100);
  --action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-100);
  --action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--mono-grey-100);
  --action-secondary-background: var(--white-opacity-0);
  --action-secondary-background-hover: var(--white-opacity-0);
  --action-secondary-background-focus: var(--white-opacity-0);
  --action-secondary-background-disabled: var(--white-opacity-0);
  --action-secondary-text-color: var(--mono-grey-200);
  --action-secondary-text-color-hover: var(--mono-grey-100);
  --action-secondary-text-color-focus: var(--mono-grey-100);
  --action-secondary-text-color-disabled: var(--mono-grey-100);

  --action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);
  --action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);
  --action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);
  --action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);
  --action-tertiary-background: var(--white-opacity-0);
  --action-tertiary-background-hover: var(--mono-grey-800);
  --action-tertiary-background-focus: var(--mono-grey-800);
  --action-tertiary-background-disabled: var(--mono-grey-800);
  --action-tertiary-text-color: var(--mono-grey-200);
  --action-tertiary-text-color-hover: var(--mono-grey-100);
  --action-tertiary-text-color-focus: var(--mono-grey-100);
  --action-tertiary-text-color-disabled: var(--mono-grey-100);

  --action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--mono-white);
  --action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--mono-white);
  --action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--mono-white);
  --action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--mono-white);
  --action-attention-background: var(--mono-white);
  --action-attention-background-hover: var(--mono-grey-100);
  --action-attention-background-focus: var(--mono-grey-100);
  --action-attention-background-disabled: var(--mono-grey-100);
  --action-attention-text-color: var(--mono-black);
  --action-attention-text-color-hover: var(--mono-black);
  --action-attention-text-color-focus: var(--mono-black);
  --action-attention-text-color-disabled: var(--mono-black);

  /* Badge */
  --badge-text-color: var(--mono-black);
  --badge-background-neutral: var(--mono-grey-500);
  --badge-background-positive: var(--mono-grey-300);
  --badge-background-warning: var(--mono-white);
  --badge-background-attention: var(--mono-white);

  /* Outline (Focus) */
  --outline-color: var(--mono-white);

  /* Icon */
  --icon-color-default: var(--mono-white);
  --icon-color-inverted: var(--mono-black);

  /* Type */
  --text-color: var(--mono-white);
  --heading-text-color: var(--mono-white);

  /* Input */
  --input-background: var(--mono-grey-900);

  /* Border */
  --border-color: var(--white-opacity-20);

  /* Surface */
  --surface: var(--mono-grey-800);
  --surface-elevated-alpha: var(--white-opacity-10);
  --surface-elevated-100: var(--mono-grey-600);
  --surface-elevated-200: var(--mono-grey-700);
  --surface-recessed-alpha: var(--black-opacity-30);
  --surface-recessed-100: var(--mono-grey-800);
  --surface-recessed-200: var(--mono-grey-900);

  /* Switch */
  --switch-track-background: var(--mono-grey-500);
  --switch-track-background-checked: var(--mono-white);

  /* Tabs */
  --tab-border-color: var(--mono-grey-600);

  --tab-background: var(--mono-grey-900);
  --tab-icon: var(--mono-grey-100);
  --tab-text-color: var(--mono-grey-100);

  --tab-background-active: var(--mono-grey-100);
  --tab-icon-active: var(--mono-grey-900);
  --tab-text-color-active: var(--mono-grey-900);
  --tab-shadow-active: var(--mono-black);

  /* Carousel */
  --carousel-background: var(--mono-grey-700);
}

/* ================================================================= */
/* 4. SET THE FOUNDATION                                             */
/* Map tokens to semantic or component contexts .                    */
/* ================================================================= */
html[data-brand='mono'] {
  --action-padding: var(--space-200) var(--space-500);
  --action-icon-only-padding: var(--space-000);
  --action-radius: var(--radius-100);
  --action-font-size: var(--text-font-size);
  --action-line-height: var(--text-line-height);
  --action-font-weight: var(--font-weight-bold);

  /* Feedback • Alerts, Messages, Notifciations */
  --feedback-plain-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-mono-border-color);
  --feedback-neutral-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-neutral-border-color);
  --feedback-positive-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-positive-border-color);
  --feedback-info-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-info-border-color);
  --feedback-warning-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-warning-border-color);
  --feedback-attention-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-attention-border-color);

  /* Card */
  --card-radius: var(--radius-150);
}