/*
 * Color system derived from the Radicle Explorer design system.
 * Dark theme only. Variable names match the explorer for consistency.
 *
 * Source: https://github.com/radicle-dev/radicle-explorer
 *         public/colors.css
 */

:root {
    /* ── Surfaces ─────────────────────────────────── */
    --color-surface-base: #00060f;
    --color-surface-canvas: #0a1018;
    --color-surface-subtle: #141a22;
    --color-surface-mid: #1f242c;
    --color-surface-strong: #29303a;
    --color-surface-alpha-subtle: rgba(255, 255, 255, 0.04);
    --color-surface-alpha-mid: rgba(255, 255, 255, 0.08);
    --color-surface-alpha-strong: rgba(255, 255, 255, 0.12);

    /* ── Text ─────────────────────────────────────── */
    --color-text-primary: #ffffff;
    --color-text-secondary: #b8babc;
    --color-text-tertiary: #8f9296;
    --color-text-quaternary: #666a6f;
    --color-text-disabled: rgba(255, 255, 255, 0.24);

    /* ── Borders ──────────────────────────────────── */
    --color-border-subtle: #1f242c;
    --color-border-mid: #29303a;
    --color-border-strong: #3d4248;

    /* ── Brand / Accent Blue ──────────────────────── */
    --color-brand-bg: #1c77ff;
    --color-brand-hover: #4d94ff;
    --color-text-brand: #4d94ff;

    /* ── Accent Colors ────────────────────────────── */
    --color-accent-blue-400: #4d94ff;
    --color-accent-blue-500: #1c77ff;
    --color-accent-blue-900: #061d33;

    --color-accent-green-400: #73e926;
    --color-accent-green-500: #58e600;
    --color-accent-green-900: #0a1f00;

    --color-accent-purple-400: #8a74fa;
    --color-accent-purple-500: #886bf2;

    --color-accent-pink-500: #ffa5ff;

    --color-accent-cyan-400: #33dbde;

    /* ── Semantic ─────────────────────────────────── */
    --color-feedback-success-text: #73d13d;
    --color-feedback-success-bg: #0f2305;
    --color-feedback-warning-text: #ffc53d;
    --color-feedback-warning-bg: #613400;
    --color-feedback-error-text: #ff5c5c;
    --color-feedback-error-bg: #330f10;

    /* ── Elevation ────────────────────────────────── */
    --elevation-low: 0 0 48px 0 #000000ee;

    /* ── Radii ────────────────────────────────────── */
    --border-radius-xs: 0.0625rem;
    --border-radius-sm: 0.125rem;
    --border-radius-md: 0.25rem;
    --border-radius-lg: 0.5rem;
    --border-radius-full: 99rem;
}