webui/src/app/globals.css

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Linear-style design tokens — expose colors and elevations as CSS variables
   so both Tailwind and MUI reach for the same values. */
:root {
    --lin-bg-base: #ffffff;
    --lin-bg-subtle: #fbfbfc;
    --lin-bg-muted: #f4f5f8;
    --lin-bg-hover: #eeeff2;
    --lin-bg-active: #e6e7eb;

    --lin-border-subtle: #e6e7eb;
    --lin-border-strong: #d0d3d9;

    --lin-text-primary: #0d0e10;
    --lin-text-secondary: #4b4f57;
    --lin-text-muted: #6b7280;

    --lin-accent: #5e6ad2;
    --lin-accent-hover: #4f5abd;
    --lin-accent-muted: rgba(94, 106, 210, 0.12);

    --lin-danger: #eb5757;
    --lin-success: #4cb782;
    --lin-warning: #f2c94c;

    --lin-shadow-card: 0 1px 2px 0 rgba(15, 17, 22, 0.04);
    --lin-shadow-popover: 0 4px 12px -2px rgba(15, 17, 22, 0.08), 0 0 0 1px rgba(15, 17, 22, 0.06);
    --lin-shadow-overlay: 0 8px 32px -8px rgba(15, 17, 22, 0.16), 0 0 0 1px rgba(15, 17, 22, 0.08);

    --lin-topbar-height: 56px;
    --lin-sidebar-width: 260px;
    --lin-content-max: 1360px;
    --lin-content-pad-x: 32px;
    --lin-content-pad-y: 28px;
    --lin-section-gap: 24px;
}

.dark {
    --lin-bg-base: #08090a;
    --lin-bg-subtle: #101113;
    --lin-bg-muted: #181a1f;
    --lin-bg-hover: #22262f;
    --lin-bg-active: #2a2e37;

    --lin-border-subtle: #23252a;
    --lin-border-strong: #33363d;

    --lin-text-primary: #f7f8f8;
    --lin-text-secondary: #b4b8c0;
    --lin-text-muted: #8a8f98;

    --lin-accent: #7079e0;
    --lin-accent-hover: #8d95f2;
    --lin-accent-muted: rgba(112, 121, 224, 0.18);

    --lin-shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
    --lin-shadow-popover: 0 4px 12px -2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --lin-shadow-overlay: 0 8px 32px -8px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

html {
    color-scheme: light;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings:
        "cv02" on,
        "cv03" on,
        "cv04" on,
        "cv11" on;
}

html.dark {
    color-scheme: dark;
}

body {
    background-color: var(--lin-bg-base);
    color: var(--lin-text-primary);
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: -0.006em;
}

::selection {
    background-color: var(--lin-accent-muted);
    color: var(--lin-text-primary);
}

@layer components {
    .lin-surface {
        background-color: var(--lin-bg-base);
        border: 1px solid var(--lin-border-subtle);
        border-radius: 8px;
    }

    .lin-surface-muted {
        background-color: var(--lin-bg-subtle);
        border: 1px solid var(--lin-border-subtle);
        border-radius: 8px;
    }

    .lin-row-hover {
        transition:
            background-color 120ms ease,
            border-color 120ms ease;
    }
    .lin-row-hover:hover {
        background-color: var(--lin-bg-hover);
    }

    .lin-eyebrow {
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--lin-text-muted);
    }

    .lin-divider {
        border-color: var(--lin-border-subtle);
    }

    .lin-input {
        @apply w-full border bg-transparent px-3 py-2 text-sm text-text-primary transition-colors focus:outline-none dark:text-text-dark-primary;
        border-color: var(--lin-border-subtle);
        border-radius: 6px;
    }
    .lin-input:hover {
        border-color: var(--lin-border-strong);
    }
    .lin-input:focus,
    .lin-input:focus-visible {
        border-color: var(--lin-accent);
        box-shadow: 0 0 0 2px rgba(94, 106, 210, 0.2);
    }
}

/* Custom scrollbar — thin, neutral, no track */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(15, 17, 22, 0.14);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 17, 22, 0.24);
}

.dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
}

.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* MUI overrides — strip the drop-shadows and easing MUI applies by default so
   components respect Linear's flatter surface treatment. */
.MuiAppBar-root {
    background-color: var(--lin-bg-base) !important;
    color: var(--lin-text-primary) !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--lin-border-subtle) !important;
    transition: none !important;
}

.MuiButton-root {
    text-transform: none !important;
    letter-spacing: -0.006em !important;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        color 120ms ease !important;
}
.MuiButton-root:hover {
    transform: none !important;
    box-shadow: none !important;
}
.MuiButton-root:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(94, 106, 210, 0.35);
}

.MuiIconButton-root {
    transition:
        background-color 120ms ease,
        color 120ms ease !important;
}
.MuiIconButton-root:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(94, 106, 210, 0.35);
}

/* Keyboard hint chip */
kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    min-width: 18px;
    padding: 0 5px;
    font-family:
        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    color: var(--lin-text-muted);
    background: var(--lin-bg-muted);
    border: 1px solid var(--lin-border-subtle);
    border-radius: 4px;
}

/* Focus-visible ring for native elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(94, 106, 210, 0.35);
    outline-offset: 1px;
    border-radius: 4px;
}

/* Subtle fade for route transitions / initial mount */
@keyframes lin-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.lin-fade-in {
    animation: lin-fade-in 200ms ease-out both;
}