/* ============================================================
   DevPortal — Branding & Design Tokens
   Dark is the default cascade. Light is secondary.
   ============================================================ */

/* ------------------------------------------------------------
   Vendored web fonts — both families are licensed under SIL OFL 1.1.
   Geist: copyright Vercel Inc. (license file unavailable at download time).
   JetBrains Mono: copyright JetBrains s.r.o. (OFL.txt included in fonts/).
   ------------------------------------------------------------ */
@font-face {
    font-family: "Geist";
    src: url('../fonts/Geist-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: "Geist";
    src: url('../fonts/Geist-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

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

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

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

/* ------------------------------------------------------------
   Geometry, spacing, size, and font tokens (theme-invariant)
   ------------------------------------------------------------ */
:root {
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-pill: 999px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    --size-topbar: 48px;
    --size-sidebar: 240px;
    --size-sidebar-collapsed: 56px;
    --size-bottombar: 60px;
    --size-row: 38px;

    --font-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Code", "Cascadia Mono", Consolas, "Courier New", monospace;
}

/* ------------------------------------------------------------
   Dark palette — default (applied when no data-theme is set)
   ------------------------------------------------------------ */
:root,
[data-theme="dark"] {
    --color-bg-app: #1e1e1e;
    --color-bg-surface: #252526;
    --color-bg-elevated: #2d2d30;
    --color-bg-sunken: #1a1a1a;
    --color-bg-titlebar: #181818;
    --color-bg-hover: rgba(255, 255, 255, 0.06);
    --color-bg-selected: rgba(58, 130, 246, 0.16);

    --color-text-primary: #e6e6e6;
    --color-text-secondary: #b0b3b8;
    --color-text-muted: #9d9d9d;
    --color-text-on-accent: #ffffff;
    --color-text-link: #4daafc;

    --color-avatar-bg: #235ab5;

    --color-border: #2b2b2b;
    --color-border-strong: #3c3c3c;
    --color-border-focus: #4daafc;

    --color-accent: #3a82f6;
    --color-accent-hover: #4a90ff;
    --color-accent-press: #2f6fd8;
    --color-accent-subtle: rgba(58, 130, 246, 0.14);

    --color-success: #3fb950;
    --color-success-bg: rgba(63, 185, 80, 0.15);
    --color-warning: #d29922;
    --color-warning-bg: rgba(210, 153, 34, 0.15);
    --color-danger: #f85149;
    --color-danger-bg: rgba(248, 81, 73, 0.15);
    --color-info: #4daafc;
    --color-info-bg: rgba(77, 170, 252, 0.15);

    --color-diff-add-bg: rgba(63, 185, 80, 0.13);
    --color-diff-add-gutter: rgba(63, 185, 80, 0.30);
    --color-diff-add-word: rgba(63, 185, 80, 0.40);
    --color-diff-add-text: #56d364;
    --color-diff-del-bg: rgba(248, 81, 73, 0.13);
    --color-diff-del-gutter: rgba(248, 81, 73, 0.30);
    --color-diff-del-word: rgba(248, 81, 73, 0.40);
    --color-diff-del-text: #f85149;
    --color-diff-modified: #d29922;
    --color-diff-hunk-bg: #1c2b3a;
    --color-diff-context-text: #b0b3b8;

    --color-wi-feature: #8957e5;
    --color-wi-bug: #f85149;
    --color-wi-task: #d4a72c;

    --color-state-new: #6e7681;
    --color-state-approved: #d29922;
    --color-state-inprogress: #3a82f6;
    --color-state-done: #3fb950;
    --color-state-removed: #484f58;

    --color-prio-critical: #f85149;
    --color-prio-high: #db6d28;
    --color-prio-medium: #d4a72c;
    --color-prio-low: #8b949e;

    --color-syntax-keyword: #569cd6;
    --color-syntax-type: #4ec9b0;
    --color-syntax-string: #ce9178;
    --color-syntax-number: #b5cea8;
    --color-syntax-comment: #6a9955;
    --color-syntax-func: #dcdcaa;
    --color-syntax-var: #9cdcfe;
    --color-syntax-punct: #d4d4d4;

    --shadow-popover: 0 6px 20px rgba(0, 0, 0, 0.45);
    --shadow-dialog: 0 16px 48px rgba(0, 0, 0, 0.6);

    /* Terminal tokens — always dark; theme-invariant */
    --color-terminal-bg: #1a1a1a;
    --color-terminal-fg: #d4d4d4;
    --color-terminal-cursor: #4daafc;
    --color-terminal-selection: rgba(77, 170, 252, 0.25);
    --color-terminal-fg-dim: #6b7280;

    --term-ansi-black: #1a1a1a;
    --term-ansi-red: #f87171;
    --term-ansi-green: #4ade80;
    --term-ansi-yellow: #facc15;
    --term-ansi-blue: #60a5fa;
    --term-ansi-magenta: #c084fc;
    --term-ansi-cyan: #22d3ee;
    --term-ansi-white: #d4d4d4;

    --term-ansi-bright-black: #6b7280;
    --term-ansi-bright-red: #fca5a5;
    --term-ansi-bright-green: #86efac;
    --term-ansi-bright-yellow: #fde047;
    --term-ansi-bright-blue: #93c5fd;
    --term-ansi-bright-magenta: #d8b4fe;
    --term-ansi-bright-cyan: #67e8f9;
    --term-ansi-bright-white: #f4f4f5;
}

/* ------------------------------------------------------------
   Light palette override
   Structural tokens remapped; diff/syntax/wi/state/priority
   intentionally stay identical to dark (light is secondary).
   ------------------------------------------------------------ */
[data-theme="light"] {
    --color-bg-app: #f3f3f3;
    --color-bg-surface: #ffffff;
    --color-bg-elevated: #f8f8f8;
    --color-bg-sunken: #ebebeb;
    --color-bg-titlebar: #e8e8e8;
    --color-bg-hover: rgba(0, 0, 0, 0.05);
    --color-bg-selected: rgba(58, 130, 246, 0.12);

    --color-text-primary: #1f1f1f;
    --color-text-secondary: #4a4a4a;
    --color-text-muted: #767676;
    --color-text-on-accent: #ffffff;
    --color-text-link: #0966c3;

    --color-border: #d1d1d1;
    --color-border-strong: #b0b0b0;
    --color-border-focus: #3a82f6;

    --color-accent: #3a82f6;
    --color-accent-hover: #2f6fd8;
    --color-accent-press: #245db5;
    --color-accent-subtle: rgba(58, 130, 246, 0.10);

    --color-success: #1a7f37;
    --color-success-bg: rgba(26, 127, 55, 0.12);
    --color-warning: #9a6700;
    --color-warning-bg: rgba(154, 103, 0, 0.12);
    --color-danger: #cf222e;
    --color-danger-bg: rgba(207, 34, 46, 0.12);
    --color-info: #0969da;
    --color-info-bg: rgba(9, 105, 218, 0.12);

    --shadow-popover: 0 6px 20px rgba(0, 0, 0, 0.12);
    --shadow-dialog: 0 16px 48px rgba(0, 0, 0, 0.20);
}

/* ------------------------------------------------------------
   Base body styles
   ------------------------------------------------------------ */
body {
    margin: 0;
    padding: 0;
    background: var(--color-bg-app);
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}