/* JetBrains Mono */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-Regular-am2WezT.woff2") format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-Italic-OYvFqf7.woff2") format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-Medium-w1la64X.woff2") format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-MediumItalic-KoNpF73.woff2") format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-Bold-0wmHEFC.woff2") format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-BoldItalic-vz2kTxu.woff2") format('woff2');
}

/* Apply system font globally */
html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Pointer cursor for interactive elements */

a,
button,
[role="button"],
[type="button"],
[type="submit"],
[type="reset"],
[onclick],
[data-action],
label[for],
select,
summary,
.cursor-pointer {
    cursor: pointer;
}

/* =============================================================================
   PRIMER-INSPIRED DESIGN TOKENS
   Functional naming: role-modifier-emphasis
   Primary accent: Black (not Primer's blue/green)
   ============================================================================= */

@theme {
    /* === Font Family === */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* === Neutral Scale (Primer-style, 0-12) === */
    --color-neutral-0: #ffffff;
    --color-neutral-1: #f6f8fa;
    --color-neutral-2: #eaeef2;
    --color-neutral-3: #d1d9e0;
    --color-neutral-4: #afb8c1;
    --color-neutral-5: #8c959f;
    --color-neutral-6: #6e7781;
    --color-neutral-7: #57606a;
    --color-neutral-8: #424a53;
    --color-neutral-9: #32383f;
    --color-neutral-10: #24292f;
    --color-neutral-11: #1f2328;
    --color-neutral-12: #0d1117;

    /* === Foreground Colors === */
    --color-fg-default: var(--color-neutral-10);
    --color-fg-muted: var(--color-neutral-5);
    --color-fg-subtle: var(--color-neutral-6);
    --color-fg-emphasis: var(--color-neutral-11);
    --color-fg-onEmphasis: var(--color-neutral-0);

    /* === Canvas/Background Colors === */
    --color-canvas-default: var(--color-neutral-0);
    --color-canvas-subtle: var(--color-neutral-1);
    --color-canvas-inset: var(--color-neutral-1);
    --color-canvas-overlay: var(--color-neutral-0);

    /* === Border Colors === */
    --color-border-default: var(--color-neutral-3);
    --color-border-muted: var(--color-neutral-2);
    --color-border-subtle: var(--color-neutral-2);
    --color-border-emphasis: var(--color-neutral-11);

    /* === Neutral Muted (for badges, skeleton loaders, etc.) === */
    --color-neutral-muted: var(--color-neutral-3);
    --color-neutral-subtle: var(--color-neutral-2);

    /* === Accent Colors (Black as primary - NOT blue/green) === */
    --color-accent-fg: var(--color-neutral-11);
    --color-accent-emphasis: var(--color-neutral-11);
    --color-accent-muted: var(--color-neutral-1);
    --color-accent-subtle: var(--color-neutral-2);

    /* === Semantic: Success (Green) === */
    --color-success-fg: #1a7f37;
    --color-success-emphasis: #1f883d;
    --color-success-muted: #dafbe1;
    --color-success-subtle: #dafbe1;

    /* === Semantic: Danger (Red) === */
    --color-danger-fg: #cf222e;
    --color-danger-emphasis: #da3633;
    --color-danger-muted: #ffebe9;
    --color-danger-subtle: #ffebe9;

    /* === Semantic: Attention (Amber/Yellow) === */
    --color-attention-fg: #9a6700;
    --color-attention-emphasis: #bf8700;
    --color-attention-muted: #fff8c5;
    --color-attention-subtle: #fff8c5;

    /* === Semantic: Severe (Orange) === */
    --color-severe-fg: #bc4c00;
    --color-severe-emphasis: #d47616;
    --color-severe-muted: #fff1e5;
    --color-severe-subtle: #fff1e5;

    /* === Semantic: Done (Purple) === */
    --color-done-fg: #8250df;
    --color-done-emphasis: #8250df;
    --color-done-muted: #fbefff;
    --color-done-subtle: #fbefff;

    /* === Semantic: Sponsors (Pink) === */
    --color-sponsors-fg: #bf3989;
    --color-sponsors-emphasis: #bf3989;
    --color-sponsors-muted: #ffeff7;
    --color-sponsors-subtle: #ffeff7;

    /* === Semantic: Info (Blue/Cyan) === */
    --color-info-fg: #0969da;
    --color-info-emphasis: #0969da;
    --color-info-muted: #ddf4ff;
    --color-info-subtle: #ddf4ff;

    /* === Semantic: Open (Green for open issues/PRs) === */
    --color-open-fg: #1a7f37;
    --color-open-emphasis: #1f883d;
    --color-open-muted: #dafbe1;

    /* === Semantic: Closed (Red for closed issues/PRs) === */
    --color-closed-fg: #cf222e;
    --color-closed-emphasis: #da3633;
    --color-closed-muted: #ffebe9;

    /* === Button Sizes === */
    --button-height-sm: 28px;
    --button-height-md: 32px;
    --button-height-lg: 40px;

    /* === Border Radius === */
    --borderRadius-small: 4px;
    --borderRadius-medium: 6px;
    --borderRadius-large: 8px;
    --borderRadius-full: 9999px;

    /* === Shadows (minimal - flat design) === */
    --shadow-button: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-dropdown: 0 8px 24px rgba(140, 149, 159, 0.2);
    --shadow-overlay: 0 16px 32px rgba(140, 149, 159, 0.24);

    /* === Legacy gray-900 override for compatibility === */
    --color-gray-900: rgb(31 35 40);
}

/* =============================================================================
   CSS CUSTOM PROPERTIES (exposed to browser)
   These are duplicated from @theme for direct CSS access
   ============================================================================= */

:root {
    --color-neutral-muted: #d1d9e0;
    --color-neutral-subtle: #eaeef2;
}

/* =============================================================================
   DARK MODE TOKENS
   Neutral scale inverts for dark mode
   ============================================================================= */

html.dark {
    /* === Neutral Scale Inverted === */
    --color-neutral-0: #0d1117;
    --color-neutral-1: #161b22;
    --color-neutral-2: #21262d;
    --color-neutral-3: #30363d;
    --color-neutral-4: #484f58;
    --color-neutral-5: #6e7681;
    --color-neutral-6: #8b949e;
    --color-neutral-7: #b1bac4;
    --color-neutral-8: #c9d1d9;
    --color-neutral-9: #e6edf3;
    --color-neutral-10: #f0f6fc;
    --color-neutral-11: #ffffff;
    --color-neutral-12: #ffffff;

    /* === Canvas Overlay (dark) === */
    --color-canvas-overlay: var(--color-neutral-2);

    /* === Neutral Muted (dark) === */
    --color-neutral-muted: #30363d;
    --color-neutral-subtle: #21262d;

    /* === Semantic: Success (dark) === */
    --color-success-fg: #3fb950;
    --color-success-emphasis: #238636;
    --color-success-muted: rgba(46, 160, 67, 0.15);
    --color-success-subtle: rgba(46, 160, 67, 0.1);

    /* === Semantic: Danger (dark) === */
    --color-danger-fg: #f85149;
    --color-danger-emphasis: #da3633;
    --color-danger-muted: rgba(248, 81, 73, 0.15);
    --color-danger-subtle: rgba(248, 81, 73, 0.1);

    /* === Semantic: Attention (dark) === */
    --color-attention-fg: #d29922;
    --color-attention-emphasis: #9e6a03;
    --color-attention-muted: rgba(187, 128, 9, 0.15);
    --color-attention-subtle: rgba(187, 128, 9, 0.1);

    /* === Semantic: Severe (dark) === */
    --color-severe-fg: #db6d28;
    --color-severe-emphasis: #bd561d;
    --color-severe-muted: rgba(219, 109, 40, 0.15);
    --color-severe-subtle: rgba(219, 109, 40, 0.1);

    /* === Semantic: Done (dark) === */
    --color-done-fg: #a371f7;
    --color-done-emphasis: #8957e5;
    --color-done-muted: rgba(163, 113, 247, 0.15);
    --color-done-subtle: rgba(163, 113, 247, 0.1);

    /* === Semantic: Sponsors (dark) === */
    --color-sponsors-fg: #db61a2;
    --color-sponsors-emphasis: #bf4b8a;
    --color-sponsors-muted: rgba(219, 97, 162, 0.15);
    --color-sponsors-subtle: rgba(219, 97, 162, 0.1);

    /* === Semantic: Info (dark) === */
    --color-info-fg: #58a6ff;
    --color-info-emphasis: #388bfd;
    --color-info-muted: rgba(56, 139, 253, 0.15);
    --color-info-subtle: rgba(56, 139, 253, 0.1);

    /* === Semantic: Open (dark) === */
    --color-open-fg: #3fb950;
    --color-open-emphasis: #238636;
    --color-open-muted: rgba(46, 160, 67, 0.15);

    /* === Semantic: Closed (dark) === */
    --color-closed-fg: #f85149;
    --color-closed-emphasis: #da3633;
    --color-closed-muted: rgba(248, 81, 73, 0.15);

    /* === Shadows (dark) === */
    --shadow-button: 0 0 transparent;
    --shadow-dropdown: 0 8px 24px #010409;
    --shadow-overlay: 0 16px 32px #010409;
}

/* =============================================================================
   COMPONENT: Buttons
   Primer-inspired button variants with black as primary accent
   ============================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: var(--button-height-md);
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    border-radius: var(--borderRadius-medium);
    transition: background-color 75ms ease-out, border-color 75ms ease-out;
    cursor: pointer;
    white-space: nowrap;
}

.btn-sm {
    height: var(--button-height-sm);
    padding: 0 0.75rem;
    font-size: 0.75rem;
}

.btn-lg {
    height: var(--button-height-lg);
    padding: 0 1.5rem;
    font-size: 1rem;
}

/* Primary Button (Black accent) */
.btn-primary {
    color: var(--color-fg-onEmphasis);
    background-color: var(--color-accent-emphasis);
    border: 1px solid var(--color-accent-emphasis);
    box-shadow: var(--shadow-button);
}

.btn-primary:hover {
    background-color: var(--color-neutral-10);
    border-color: var(--color-neutral-10);
}

.btn-primary:focus-visible {
    outline: 2px solid var(--color-accent-emphasis);
    outline-offset: 2px;
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Default/Secondary Button */
.btn-default {
    color: var(--color-fg-default);
    background-color: var(--color-canvas-default);
    border: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-button);
}

.btn-default:hover {
    background-color: var(--color-canvas-subtle);
    border-color: var(--color-border-default);
}

.btn-default:focus-visible {
    outline: 2px solid var(--color-accent-emphasis);
    outline-offset: 2px;
}

.btn-default:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Invisible/Ghost Button */
.btn-invisible {
    color: var(--color-accent-fg);
    background-color: transparent;
    border: 1px solid transparent;
}

.btn-invisible:hover {
    background-color: var(--color-accent-muted);
}

.btn-invisible:focus-visible {
    outline: 2px solid var(--color-accent-emphasis);
    outline-offset: 2px;
}

/* Danger Button */
.btn-danger {
    color: var(--color-fg-onEmphasis);
    background-color: var(--color-danger-emphasis);
    border: 1px solid var(--color-danger-emphasis);
    box-shadow: var(--shadow-button);
}

.btn-danger:hover {
    background-color: var(--color-danger-fg);
    border-color: var(--color-danger-fg);
}

.btn-danger:focus-visible {
    outline: 2px solid var(--color-danger-emphasis);
    outline-offset: 2px;
}

.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Icon-only Button */
.btn-icon {
    width: var(--button-height-md);
    padding: 0;
}

.btn-icon.btn-sm {
    width: var(--button-height-sm);
}

.btn-icon.btn-lg {
    width: var(--button-height-lg);
}

/* =============================================================================
   COMPONENT: Labels/Badges
   Primer-inspired semantic status labels
   ============================================================================= */

.Label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    border-radius: var(--borderRadius-full);
    border: 1px solid transparent;
    white-space: nowrap;
}

.Label--default {
    color: var(--color-fg-default);
    background-color: var(--color-accent-subtle);
    border-color: var(--color-border-default);
}

.Label--accent {
    color: var(--color-fg-emphasis);
    background-color: var(--color-accent-muted);
}

.Label--success {
    color: var(--color-success-fg);
    background-color: var(--color-success-muted);
}

.Label--danger {
    color: var(--color-danger-fg);
    background-color: var(--color-danger-muted);
}

.Label--attention {
    color: var(--color-attention-fg);
    background-color: var(--color-attention-muted);
}

.Label--severe {
    color: var(--color-severe-fg);
    background-color: var(--color-severe-muted);
}

.Label--done {
    color: var(--color-done-fg);
    background-color: var(--color-done-muted);
}

.Label--sponsors {
    color: var(--color-sponsors-fg);
    background-color: var(--color-sponsors-muted);
}

.Label--info {
    color: var(--color-info-fg);
    background-color: var(--color-info-muted);
}

.Label--open {
    color: var(--color-open-fg);
    background-color: var(--color-open-muted);
}

.Label--closed {
    color: var(--color-closed-fg);
    background-color: var(--color-closed-muted);
}

/* Outlined Label variant */
.Label--outline {
    background-color: transparent;
    border-width: 1px;
    border-style: solid;
}

.Label--outline.Label--success {
    border-color: var(--color-success-emphasis);
}

.Label--outline.Label--danger {
    border-color: var(--color-danger-emphasis);
}

.Label--outline.Label--attention {
    border-color: var(--color-attention-emphasis);
}

/* =============================================================================
   COMPONENT: FormControl
   Primer-inspired form input pattern
   ============================================================================= */

.FormControl {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.FormControl-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-fg-default);
}

.FormControl-label--required::after {
    content: " *";
    color: var(--color-danger-fg);
}

.FormControl-input {
    width: 100%;
    max-width: 28rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-fg-default);
    background-color: var(--color-canvas-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--borderRadius-medium);
    transition: border-color 75ms ease-out, box-shadow 75ms ease-out;
}

.FormControl-input::placeholder {
    color: var(--color-fg-muted);
}

.FormControl-input:focus {
    outline: none;
    border-color: var(--color-accent-emphasis);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
}

.FormControl-input:disabled {
    background-color: var(--color-canvas-subtle);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Validation states */
.FormControl-input[aria-invalid="true"],
.FormControl-input.is-invalid {
    border-color: var(--color-danger-emphasis);
}

.FormControl-input[aria-invalid="true"]:focus,
.FormControl-input.is-invalid:focus {
    box-shadow: 0 0 0 3px var(--color-danger-muted);
}

.FormControl-input.is-valid {
    border-color: var(--color-success-emphasis);
}

.FormControl-input.is-valid:focus {
    box-shadow: 0 0 0 3px var(--color-success-muted);
}

.FormControl-caption {
    font-size: 0.75rem;
    color: var(--color-fg-muted);
}

.FormControl-validation {
    font-size: 0.75rem;
}

.FormControl-validation--error {
    color: var(--color-danger-fg);
}

.FormControl-validation--success {
    color: var(--color-success-fg);
}

/* =============================================================================
   COMPONENT: Box/Card
   Primer-inspired container component
   ============================================================================= */

.Box {
    background-color: var(--color-canvas-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--borderRadius-large);
}

.Box-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border-muted);
}

.Box-header-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-fg-default);
}

.Box-body {
    padding: 1.5rem;
}

.Box-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border-muted);
    background-color: var(--color-canvas-subtle);
    border-radius: 0 0 var(--borderRadius-large) var(--borderRadius-large);
}

.Box-row {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border-muted);
}

.Box-row:last-child {
    border-bottom: none;
}

/* Box variants */
.Box--condensed .Box-header,
.Box--condensed .Box-body,
.Box--condensed .Box-row,
.Box--condensed .Box-footer {
    padding: 0.75rem 1rem;
}

.Box--borderless {
    border: none;
}

/* =============================================================================
   COMPONENT: DataTable
   Primer-inspired table styling
   ============================================================================= */

.DataTable {
    width: 100%;
    border-collapse: collapse;
}

.DataTable-header {
    border-bottom: 1px solid var(--color-border-default);
}

.DataTable-cell--header {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.DataTable-body .DataTable-row {
    border-bottom: 1px solid var(--color-border-muted);
}

.DataTable-body .DataTable-row:last-child {
    border-bottom: none;
}

.DataTable-row:hover {
    background-color: var(--color-canvas-subtle);
}

.DataTable-cell {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--color-fg-default);
}

.DataTable-cell--muted {
    color: var(--color-fg-muted);
}

.DataTable-cell--mono {
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

/* =============================================================================
   COMPONENT: NavList
   Primer-inspired navigation list
   ============================================================================= */

.NavList {
    list-style: none;
    padding: 0;
    margin: 0;
}

.NavList-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-fg-default);
    text-decoration: none;
    border-radius: var(--borderRadius-medium);
    transition: background-color 75ms ease-out;
    cursor: pointer;
}

.NavList-item:hover {
    background-color: var(--color-canvas-subtle);
}

.NavList-item--active {
    background-color: var(--color-accent-muted);
    color: var(--color-fg-emphasis);
    font-weight: 500;
}

.NavList-item-icon {
    width: 1rem;
    height: 1rem;
    color: var(--color-fg-muted);
}

.NavList-item--active .NavList-item-icon {
    color: var(--color-fg-emphasis);
}

/* =============================================================================
   COMPONENT: Tabs
   Primer-inspired underline tab navigation
   ============================================================================= */

.tab-active {
    color: var(--color-fg-emphasis);
    border-color: var(--color-accent-emphasis);
}

.tab-inactive {
    color: var(--color-fg-muted);
    border-color: transparent;
}

.tab-inactive:hover {
    color: var(--color-fg-default);
    border-color: var(--color-border-muted);
}

/* =============================================================================
   COMPONENT: Overlay/Dialog
   Primer-inspired modal overlay
   ============================================================================= */

.Overlay-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 50;
}

.Overlay {
    position: fixed;
    z-index: 51;
}

.Dialog {
    background-color: var(--color-canvas-overlay);
    border: 1px solid var(--color-border-default);
    border-radius: var(--borderRadius-large);
    box-shadow: var(--shadow-overlay);
    max-width: 32rem;
    width: 100%;
}

.Dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border-muted);
}

.Dialog-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-fg-default);
}

.Dialog-body {
    padding: 1.5rem;
}

.Dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border-muted);
    background-color: var(--color-canvas-subtle);
    border-radius: 0 0 var(--borderRadius-large) var(--borderRadius-large);
}

/* =============================================================================
   COMPONENT: Toast/Flash
   Primer-inspired notification banners
   ============================================================================= */

.Toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--borderRadius-medium);
    border: 1px solid;
}

.Toast--success {
    color: var(--color-success-fg);
    background-color: var(--color-success-muted);
    border-color: var(--color-success-emphasis);
}

.Toast--danger,
.Toast--error {
    color: var(--color-danger-fg);
    background-color: var(--color-danger-muted);
    border-color: var(--color-danger-emphasis);
}

.Toast--attention,
.Toast--warning {
    color: var(--color-attention-fg);
    background-color: var(--color-attention-muted);
    border-color: var(--color-attention-emphasis);
}

.Toast--info {
    color: var(--color-fg-default);
    background-color: var(--color-canvas-subtle);
    border-color: var(--color-border-default);
}

/* =============================================================================
   UTILITY: Canvas backgrounds
   ============================================================================= */

.canvas-default {
    background-color: var(--color-canvas-default);
}

.canvas-subtle {
    background-color: var(--color-canvas-subtle);
}

.canvas-inset {
    background-color: var(--color-canvas-inset);
}

/* =============================================================================
   Dialog modal centering - fixes Tailwind preflight reset
   ============================================================================= */

dialog {
    margin: auto;
}
dialog::backdrop {
    background-color: rgb(0 0 0 / 0.5);
}
dialog:not([open]) {
    display: none;
}