/* ==========================================================================
   Design Tokens: Colors
   DevPortal brand — Navy #00308F, Blue #007FFF
   ========================================================================== */

:root {
  /* Brand */
  /* RGB triplet — used by accent.css rgba() variants and accent.js injection */
  --color-brand-primary-rgb: 0, 48, 143;
  --color-brand-primary: #00308F;
  --color-brand-primary-hover: #002570;
  --color-brand-primary-light: #E0E8F5;
  --color-brand-secondary: #007FFF;
  --color-brand-secondary-hover: #0066CC;
  --color-brand-accent: #007FFF;
  --color-brand-accent-hover: #0066CC;

  /* Neutrals */
  --color-neutral-0: #FFFFFF;
  --color-neutral-25: #FAFBFC;
  --color-neutral-50: #F4F5F7;
  --color-neutral-100: #EBECF0;
  --color-neutral-200: #DFE1E6;
  --color-neutral-300: #C1C7D0;
  --color-neutral-400: #A5ADBA;
  --color-neutral-500: #7A869A;
  --color-neutral-600: #6B778C;
  --color-neutral-700: #505F79;
  --color-neutral-800: #344563;
  --color-neutral-900: #172B4D;
  --color-neutral-1000: #091E42;

  /* Semantic */
  --color-success: #36B37E;
  --color-success-light: #E3FCEF;
  --color-success-dark: #006644;
  --color-warning: #FFAB00;
  --color-warning-light: #FFFAE6;
  --color-warning-dark: #FF8B00;
  --color-error: #FF5630;
  --color-error-light: #FFEBE6;
  --color-error-dark: #BF2600;
  --color-info: #0065FF;
  --color-info-light: #DEEBFF;
  --color-info-dark: #0747A6;

  /* HTTP Method Colors — Swagger/OpenAPI industry standard */
  --color-method-get: #61AFFE;
  --color-method-get-bg: #EBF3FF;
  --color-method-post: #49CC90;
  --color-method-post-bg: #E8F9F0;
  --color-method-put: #FCA130;
  --color-method-put-bg: #FFF4E6;
  --color-method-delete: #F93E3E;
  --color-method-delete-bg: #FFEBEB;
  --color-method-patch: #50E3C2;
  --color-method-patch-bg: #E6FBF6;
  --color-method-options: #906AFE;
  --color-method-options-bg: #F0EBFF;

  /* Surfaces */
  --color-surface-primary: var(--color-neutral-0);
  --color-surface-secondary: var(--color-neutral-25);
  --color-surface-tertiary: var(--color-neutral-50);
  --color-surface-elevated: var(--color-neutral-0);
  --color-surface-code: #1E1E2E;
  --color-surface-overlay: rgba(9, 30, 66, 0.54);

  /* Text */
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-tertiary: var(--color-neutral-500);
  --color-text-inverse: var(--color-neutral-0);
  --color-text-link: var(--color-brand-primary);
  --color-text-link-hover: var(--color-brand-primary-hover);
  --color-text-link-active: #001A52;
  --color-text-code: #931F29;
  --color-text-code-darkmode: #E78D95;

  /* Borders */
  --color-border-default: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-border-focus: var(--color-brand-primary);
  --color-border-error: var(--color-error);

  /* Interactive */
  --color-interactive-primary: var(--color-brand-primary);
  --color-interactive-primary-hover: var(--color-brand-primary-hover);
  --color-interactive-secondary: var(--color-neutral-50);
  --color-interactive-secondary-hover: var(--color-neutral-100);

  /* Shorthand aliases — widely used by components (api-card, blog-card, etc.) */
  --color-surface: var(--color-surface-primary);
  --color-text: var(--color-text-primary);
  --color-border: var(--color-border-default);
  --color-surface-raised: var(--color-surface-tertiary);
  --color-focus: var(--color-border-focus);

  /* Extended aliases — used by tag, badge, etc. */
  --color-surface-muted: #f1f5f9;
  --color-surface-hover: #e2e8f0;
  --color-text-muted: var(--color-neutral-500);
  --color-border-subtle: #e2e8f0;

  /* Semantic variant subtles — badges, alerts */
  --color-success-subtle: #ecfdf5;
  --color-success-text: #065f46;
  --color-warning-subtle: #fffbeb;
  --color-warning-text: #92400e;
  --color-danger-subtle: #fef2f2;
  --color-danger-text: #991b1b;

  /* Solid destructive fills, for a white label sitting on the button.
     The atom (components/atoms/button/button.css) has referenced these
     three since it was written and nothing ever defined them, so
     .btn--destructive painted no background at all: a white label on a
     transparent button, invisible against the page.

     Taken from the error ramp rather than --color-danger-text so the
     destructive button belongs to the same red as every other error
     signal. --color-error itself (#FF5630) is NOT used: white on it
     measures 3.17:1 and fails AA for button text, while #BF2600 gives
     6.01:1. The hover and active steps continue darker, so contrast
     only ever improves on interaction. The same values serve both
     themes because the label's contrast is against the button's own
     fill, not against the page. */
  --color-danger: var(--color-error-dark);
  --color-danger-hover: #A31F00;
  --color-danger-active: #8A1A00;
  --color-info-subtle: #eff6ff;
  --color-info-text: #1e40af;
  --color-brand-primary-subtle: rgba(var(--color-brand-primary-rgb), 0.08);
  --color-brand-primary-subtle-border: rgba(var(--color-brand-primary-rgb), 0.20);
  --color-brand-primary-subtle-hover: rgba(var(--color-brand-primary-rgb), 0.14);
  --color-text-on-primary: #ffffff;
}

/* Dark Mode */
[data-theme="dark"] {
  --color-surface-primary: #0D1117;
  --color-surface-secondary: #161B22;
  --color-surface-tertiary: #1C2128;
  --color-surface-elevated: #1C2128;
  --color-surface-code: #0D1117;
  --color-surface-overlay: rgba(0, 0, 0, 0.7);

  --color-text-primary: #E6EDF3;
  --color-text-secondary: #8B949E;
  --color-text-tertiary: #6E7681;
  --color-text-inverse: #0D1117;
  --color-text-link: #4DA6FF;
  --color-text-link-hover: #80C0FF;
  --color-text-link-active: #A6D4FF;
  --color-text-code: #931F29;
  --color-text-code-darkmode: #E78D95;

  --color-border-default: #30363D;
  --color-border-strong: #484F58;
  --color-border-focus: #4DA6FF;

  --color-interactive-primary: #007FFF;
  --color-interactive-primary-hover: #0066CC;
  --color-interactive-secondary: #21262D;
  --color-interactive-secondary-hover: #30363D;

  --color-neutral-50: #161B22;
  --color-neutral-100: #1C2128;
  --color-neutral-200: #30363D;
  --color-neutral-300: #484F58;

  --color-brand-primary-light: #0A1F3D;
  --color-success-light: #0D2818;
  --color-warning-light: #2D2200;
  --color-error-light: #3D0A00;
  --color-info-light: #0D2240;

  --color-method-get-bg: #162030;
  --color-method-post-bg: #0D2818;
  --color-method-put-bg: #2D2200;
  --color-method-delete-bg: #3D0A00;
  --color-method-patch-bg: #0D2820;
  --color-method-options-bg: #1A0D30;

  /* Shorthand aliases — dark mode */
  --color-surface: var(--color-surface-primary);
  --color-text: var(--color-text-primary);
  --color-border: var(--color-border-default);
  --color-surface-raised: var(--color-surface-tertiary);
  --color-focus: var(--color-border-focus);

  /* Dark mode variants used by components as fallbacks (e.g., var(--color-surface-dark, var(--color-surface))) */
  --color-surface-dark: var(--color-surface-primary);
  --color-text-dark: var(--color-text-primary);
  --color-border-dark: var(--color-border-default);
  --color-surface-raised-dark: #30363D;
  --color-text-muted-dark: #6E7681;

  /* Extended aliases — dark mode overrides */
  --color-surface-muted: #21262D;
  --color-surface-hover: #30363D;
  --color-text-muted: #6E7681;
  --color-border-subtle: #30363D;

  /* Semantic variant subtles — dark mode */
  --color-success-subtle: #0D2818;
  --color-success-text: #3FB950;
  --color-warning-subtle: #2D2200;
  --color-warning-text: #D29922;
  --color-danger-subtle: #3D0A00;
  --color-danger-text: #F85149;
  --color-info-subtle: #0D2240;
  --color-info-text: #58A6FF;
  --color-brand-primary-subtle: rgba(77, 166, 255, 0.1);
  --color-brand-primary-subtle-border: rgba(77, 166, 255, 0.2);
  --color-brand-primary-subtle-hover: rgba(77, 166, 255, 0.16);
  --color-text-on-primary: #ffffff;
}