/* Octo Code — color tokens. Dark-mode-first; depth via color layering, not shadows. */
:root {
  /* Base palette */
  --color-accent: #2F81F7;          /* Mona Blue — interactive elements, links, selected states */
  --color-accent-hover: #388BFD;
  --color-link: #58A6FF;            /* link text on dark surfaces */
  --color-success-emphasis: #238636;/* Growth Green — merge buttons, primary actions */
  --color-success-emphasis-hover: #2EA043;
  --color-success: #3FB950;         /* successful checks, merged, online */
  --color-warning: #D29922;         /* pending reviews, drafts, caution */
  --color-error: #F85149;           /* failed checks, conflicts, destructive */
  --color-error-emphasis: #DA3633;  /* filled danger hover/background */
  --color-accent-orange: #F78166;   /* active tab underline, selected row accent */

  /* Background layers (elevation = lighter layer, never shadows) */
  --color-bg: #0D1117;              /* Void Black — page background */
  --color-surface: #161B22;         /* cards, panels, sidebars */
  --color-bg-overlay: #1C2128;      /* popovers, dropdowns */
  --color-bg-modal: #21262D;        /* modals, tooltips */
  --color-backdrop: rgba(1, 4, 9, 0.8);

  /* Text */
  --color-text: #E6EDF3;            /* primary text, headings, code */
  --color-text-secondary: #8B949E;  /* descriptions, meta, timestamps */
  --color-text-soft: #C9D1D9;       /* outline-button text, tooltip text */
  --color-placeholder: #484F58;

  /* Borders */
  --color-border: #30363D;          /* dividers, card borders, input outlines */
  --color-border-hover: #484F58;
  --color-border-subtle: #21262D;   /* top-nav bottom border */

  /* Semantic aliases */
  --surface-card: var(--color-surface);
  --surface-popover: var(--color-bg-overlay);
  --surface-modal: var(--color-bg-modal);
  --text-body: var(--color-text);
  --text-meta: var(--color-text-secondary);
  --interactive: var(--color-accent);
  --diff-add-bg: rgba(63, 185, 80, 0.15);
  --diff-del-bg: rgba(248, 81, 73, 0.15);
}