/* Cyber Bust — Color tokens.
   Tier 1 primitives → Tier 2 aliases → Tier 3 semantic.
   Components consume Tier 3 only. Monochrome + one rose. Max 80% HSL saturation. */

:root {
  color-scheme: light;

  /* ---- Tier 1: Neutral (achromatic, R=G=B) ---- */
  --gray-0:   #FFFFFF;
  --gray-50:  #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #E5E5E5;
  --gray-300: #D4D4D4;
  --gray-400: #A3A3A3;
  --gray-500: #8A8A8A;
  --gray-600: #737373;
  --gray-700: #525252;
  --gray-800: #404040;
  --gray-900: #171717;
  --gray-950: #0A0A0A;

  /* ---- Tier 1: Rose (hue ~336°, sat ≤77%) ---- */
  --rose-50:  #FDF2F6;
  --rose-100: #FAE3EC;
  --rose-200: #F5C6D9;
  --rose-300: #EDA5C0;
  --rose-400: #E8709F;
  --rose-500: #D6336C;
  --rose-600: #C2185B;
  --rose-700: #AD1457;
  --rose-800: #9C1049;
  --rose-900: #7A0C39;
  --rose-950: #4A0722;

  /* ---- Tier 1: Status ---- */
  --green-50:  #F0F7F2; --green-100: #DCEDE2; --green-300: #7BC495;
  --green-500: #3D9A5B; --green-600: #2E7D46; --green-700: #236237; --green-900: #12301B;
  --ochre-50:  #FBF6E9; --ochre-100: #F6EACB; --ochre-300: #E0B44C;
  --ochre-500: #C89A2E; --ochre-600: #8A6100; --ochre-700: #6B4B00; --ochre-900: #2E2000;
  --red-50:    #FDF1F0; --red-100: #FAE0DE; --red-300: #F2A099;
  --red-500:   #D14338; --red-600: #B3261E; --red-700: #8C1D17; --red-900: #3D0C09;

  /* ---- Tier 2: Aliases ---- */
  --color-accent-base: var(--rose-600);
  --color-ink-base: var(--gray-950);

  /* ---- Tier 3: Semantic — Light ---- */
  --color-bg-canvas: #FFFFFF;
  --color-bg-surface: #FFFFFF;
  --color-bg-surface-raised: #FFFFFF;
  --color-bg-sunken: #FAFAFA;
  --color-bg-subtle: #F5F5F5;
  --color-bg-inverse: #0A0A0A;

  --color-text-primary: #0A0A0A;
  --color-text-secondary: #525252;
  --color-text-tertiary: #737373;
  --color-text-inverse: #FFFFFF;

  --color-border-subtle: #E5E5E5;
  --color-border-default: #D4D4D4;
  --color-border-strong: #A3A3A3;
  --color-border-inverse: #404040;

  --color-action-bg: #0A0A0A;
  --color-action-bg-hover: #404040;
  --color-action-bg-active: #525252;
  --color-action-fg: #FFFFFF;

  --color-accent-bg: #C2185B;
  --color-accent-bg-hover: #AD1457;
  --color-accent-bg-active: #9C1049;
  --color-accent-fg: #FFFFFF;
  --color-accent-subtle: #FDF2F6;
  --color-accent-subtle-fg: #9C1049;
  --color-accent-border: #F5C6D9;

  --color-text-link: #C2185B;
  --color-text-link-hover: #AD1457;

  --color-focus-ring: #C2185B;
  --color-focus-ring-offset: #FFFFFF;

  --color-success-bg: #F0F7F2; --color-success-fg: #236237;
  --color-success-border: #7BC495; --color-success-solid: #2E7D46;
  --color-warning-bg: #FBF6E9; --color-warning-fg: #6B4B00;
  --color-warning-border: #E0B44C; --color-warning-solid: #C89A2E;
  --color-error-bg: #FDF1F0; --color-error-fg: #8C1D17;
  --color-error-border: #F2A099; --color-error-solid: #B3261E;
  --color-info-bg: #F5F5F5; --color-info-fg: #525252;
  --color-info-border: #A3A3A3; --color-info-solid: #737373;

  --color-disabled-bg: #F5F5F5;
  --color-disabled-fg: #A3A3A3;

  --color-overlay-scrim: rgba(10, 10, 10, 0.55);
}

/* ---- Tier 3: Semantic — Dark ---- */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-canvas: #0A0A0A;
  --color-bg-surface: #141414;
  --color-bg-surface-raised: #1F1F1F;
  --color-bg-sunken: #000000;
  --color-bg-subtle: #1F1F1F;
  --color-bg-inverse: #FFFFFF;

  --color-text-primary: #F5F5F5;
  --color-text-secondary: #A3A3A3;
  --color-text-tertiary: #8A8A8A;
  --color-text-inverse: #0A0A0A;

  --color-border-subtle: #262626;
  --color-border-default: #404040;
  --color-border-strong: #525252;
  --color-border-inverse: #D4D4D4;

  --color-action-bg: #F5F5F5;
  --color-action-bg-hover: #FFFFFF;
  --color-action-bg-active: #D4D4D4;
  --color-action-fg: #0A0A0A;

  --color-accent-bg: #E8709F;
  --color-accent-bg-hover: #EDA5C0;
  --color-accent-bg-active: #F5C6D9;
  --color-accent-fg: #0A0A0A;
  --color-accent-subtle: #7A0C39;
  --color-accent-subtle-fg: #F5C6D9;
  --color-accent-border: #9C1049;

  --color-text-link: #EDA5C0;
  --color-text-link-hover: #F5C6D9;

  --color-focus-ring: #E8709F;
  --color-focus-ring-offset: #0A0A0A;

  --color-success-bg: #12301B; --color-success-fg: #7BC495;
  --color-success-border: #2E7D46; --color-success-solid: #2E7D46;
  --color-warning-bg: #2E2000; --color-warning-fg: #E0B44C;
  --color-warning-border: #8A6100; --color-warning-solid: #C89A2E;
  --color-error-bg: #3D0C09; --color-error-fg: #F2A099;
  --color-error-border: #B3261E; --color-error-solid: #B3261E;
  --color-info-bg: #171717; --color-info-fg: #A3A3A3;
  --color-info-border: #525252; --color-info-solid: #737373;

  --color-disabled-bg: #1F1F1F;
  --color-disabled-fg: #525252;

  --color-overlay-scrim: rgba(0, 0, 0, 0.7);
}