/* OraxGit — GitHub-grade design system (Orax logo palette) */

:root,
[data-theme="light"] {
    color-scheme: light;

    /* Brand — from OraxGit hexagon logo */
    --og-red: #E51E25;
    --og-red-hover: #C41820;
    --og-sky: #29ABE2;
    --og-blue: #1B75BB;
    --og-navy: #0054A6;

    /* Surfaces — GitHub-inspired */
    --og-bg: #ffffff;
    --og-canvas: #f6f8fa;
    --og-canvas-subtle: #f6f8fa;
    --og-surface: #ffffff;
    --og-surface-hover: #f3f4f6;
    --og-border: #d0d7de;
    --og-border-muted: #d8dee4;

    --og-text: #1f2328;
    --og-text-secondary: #656d76;
    --og-text-muted: #57606a;

    --og-accent: var(--og-red);
    --og-accent-fg: #ffffff;
    --og-link: var(--og-blue);
    --og-link-hover: var(--og-navy);

    --og-shadow-sm: 0 1px 0 rgba(31, 35, 40, 0.04);
    --og-shadow-md: 0 8px 24px rgba(140, 149, 159, 0.2);
    --og-shadow-lg: 0 12px 48px rgba(31, 35, 40, 0.12);

    --og-hero-gradient:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(41, 171, 226, 0.15), transparent),
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(229, 30, 37, 0.08), transparent),
        radial-gradient(ellipse 50% 30% at 0% 50%, rgba(0, 84, 166, 0.06), transparent);

    --og-code-bg: #0d1117;
    --og-header-bg: rgba(255, 255, 255, 0.85);
    --og-btn-secondary-bg: #f6f8fa;
    --og-btn-secondary-border: rgba(31, 35, 40, 0.15);
    --og-btn-secondary-text: #24292f;
    --og-success: #1a7f37;
}

[data-theme="dark"] {
    color-scheme: dark;

    --og-bg: #0d1117;
    --og-canvas: #010409;
    --og-canvas-subtle: #161b22;
    --og-surface: #161b22;
    --og-surface-hover: #21262d;
    --og-border: #30363d;
    --og-border-muted: #21262d;

    --og-text: #f0f6fc;
    --og-text-secondary: #8b949e;
    --og-text-muted: #7d8590;

    --og-link: #58a6ff;
    --og-link-hover: #79c0ff;

    --og-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.3);
    --og-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --og-shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.5);

    --og-hero-gradient:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(41, 171, 226, 0.12), transparent),
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(229, 30, 37, 0.1), transparent);

    --og-code-bg: #010409;
    --og-header-bg: rgba(13, 17, 23, 0.85);
    --og-btn-secondary-bg: #21262d;
    --og-btn-secondary-border: #30363d;
    --og-btn-secondary-text: #f0f6fc;
    --og-success: #3fb950;
}

/* Shared tokens */
:root {
    --og-radius: 6px;
    --og-radius-lg: 12px;
    --og-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji";
    --og-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --og-max: 1280px;
    --og-header-h: 64px;
}

/* Control bar — integrated in header */
.orax-intro-controls {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    position: static;
}

.orax-ctrl {
    font-family: var(--og-font);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.35rem 0.65rem;
    border-radius: var(--og-radius);
    border: 1px solid var(--og-border);
    background: var(--og-surface);
    color: var(--og-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.orax-ctrl:hover {
    background: var(--og-surface-hover);
    border-color: var(--og-text-muted);
}