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

:root {
  /* Brand */
  --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-code: #E06C75;

  /* 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;
  --color-info-subtle: #eff6ff;
  --color-info-text: #1e40af;
  --color-brand-primary-subtle: rgba(0, 48, 143, 0.1);
  --color-brand-primary-subtle-border: rgba(0, 48, 143, 0.2);
  --color-brand-primary-subtle-hover: rgba(0, 48, 143, 0.16);
  --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-code: #FF7B72;

  --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;
}