@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap");

/* ------------------------------------------------------------------
   kode.stream — design tokens
   Light-only theme. Primary blue anchors brand; violet secondary adds
   depth; teal accent highlights capability/live signals without
   conflicting with semantic success.
   ------------------------------------------------------------------ */
:root {
    --color-primary: #083edc;
    --color-primary-content: #ffffff;
    --color-secondary: #6d28d9;
    --color-secondary-content: #ffffff;
    --color-accent: #0ea5a4;
    --color-accent-content: #ffffff;
    --color-neutral: #111827;
    --color-neutral-content: #ffffff;

    --color-base-100: #ffffff;
    --color-base-200: #f6f0ff;
    --color-base-300: #e5d8ff;
    --color-base-content: #0b1020;

    --color-info: #2563eb;
    --color-info-content: #ffffff;
    --color-success: #16a34a;
    --color-success-content: #ffffff;
    --color-warning: #d97706;
    --color-warning-content: #ffffff;
    --color-error: #dc2626;
    --color-error-content: #ffffff;

    --radius-selector: 0.5rem;
    --radius-field: 0.625rem;
    --radius-box: 1rem;
    --border: 1px;

    --kodes-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Brand font + multi-layer background gradient (not expressible in Tailwind) */
body.kodes-app {
    font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
    color: var(--color-base-content);
    background-color: var(--color-base-200);
    background-image:
        radial-gradient(ellipse at 0% 0%, rgba(8, 62, 220, 0.12), transparent 42%),
        radial-gradient(ellipse at 100% 100%, rgba(109, 40, 217, 0.10), transparent 40%),
        linear-gradient(165deg, #ffffff 18%, var(--color-base-200) 100%);
    background-attachment: fixed;
}

/* App shell: tighter background for chat/admin surfaces */
body.kodes-app-shell {
    background-image:
        radial-gradient(ellipse at 0% 0%, rgba(8, 62, 220, 0.08), transparent 40%),
        linear-gradient(180deg, #ffffff 0%, var(--color-base-200) 100%);
    background-attachment: fixed;
}

/* Fluid display headline */
.kodes-display {
    font-size: clamp(2.5rem, 4vw + 1.5rem, 5rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    font-weight: 800;
}

.kodes-h2 {
    font-size: clamp(1.75rem, 1.5vw + 1rem, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.kodes-eyebrow {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--color-primary) 80%, var(--color-base-content));
}

/* ------------------------------------------------------------------
   Motion — initial states for reveal/stagger targets.
   Motion One flips these to opacity:1, translateY:0. If the user
   prefers reduced motion, we snap to the visible state instantly.
   ------------------------------------------------------------------ */
.reveal,
.stagger > * {
    opacity: 0;
    transform: translateY(12px);
    will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .stagger > * {
        opacity: 1;
        transform: none;
    }
    .kodes-hero-blob {
        animation: none !important;
    }
}

/* ------------------------------------------------------------------
   Ambient hero blobs — slow drifting radial lights behind the hero.
   Pure CSS; paused under reduced-motion.
   ------------------------------------------------------------------ */
.kodes-hero-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(72px);
    opacity: 0.55;
    pointer-events: none;
    animation: kodes-blob 18s ease-in-out infinite alternate;
}
.kodes-hero-blob--primary {
    background: radial-gradient(circle, rgba(8, 62, 220, 0.55), transparent 70%);
}
.kodes-hero-blob--secondary {
    background: radial-gradient(circle, rgba(109, 40, 217, 0.45), transparent 70%);
    animation-delay: -9s;
    animation-duration: 24s;
}

@keyframes kodes-blob {
    0% { transform: translate3d(-6%, -4%, 0) scale(1); }
    50% { transform: translate3d(4%, 6%, 0) scale(1.08); }
    100% { transform: translate3d(-2%, 2%, 0) scale(0.98); }
}

/* ------------------------------------------------------------------
   Gradient-bordered card — used on role cards, docs categories, etc.
   Uses a CSS mask trick to draw a 1px gradient border that the child
   cannot paint over.
   ------------------------------------------------------------------ */
.kodes-card-gradient-border {
    position: relative;
    border-radius: var(--radius-box);
    background: var(--color-base-100);
    isolation: isolate;
    transition: transform 0.3s var(--kodes-ease), box-shadow 0.3s var(--kodes-ease);
}
.kodes-card-gradient-border::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 45%, transparent),
        color-mix(in srgb, var(--color-secondary) 40%, transparent) 45%,
        transparent 75%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
.kodes-card-gradient-border:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -20px rgba(8, 62, 220, 0.25);
}

/* ------------------------------------------------------------------
   Glass panel — waitlist card, sign-in card, toast.
   ------------------------------------------------------------------ */
.kodes-glass {
    background: color-mix(in srgb, var(--color-base-100) 86%, transparent);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border: 1px solid color-mix(in srgb, var(--color-base-300) 65%, transparent);
    border-radius: var(--radius-box);
}

/* Primary focus ring used consistently across custom focus states */
.kodes-focusable:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-field);
}

/* Suggestion / prompt pill buttons (chat welcome screen) */
.kodes-prompt-pill {
    transition: transform 0.2s var(--kodes-ease), border-color 0.2s var(--kodes-ease),
                background-color 0.2s var(--kodes-ease);
}
.kodes-prompt-pill:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-base-300));
    background-color: color-mix(in srgb, var(--color-primary) 5%, var(--color-base-100));
}

/* Workspace color dot — hue derived from inline style var */
.kodes-ws-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--ws-color, var(--color-primary));
    flex-shrink: 0;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ws-color, var(--color-primary)) 20%, transparent);
}

/* Left-border tint on project cards */
.kodes-project-card {
    border-left: 3px solid var(--ws-color, var(--color-primary));
    transition: transform 0.25s var(--kodes-ease), box-shadow 0.25s var(--kodes-ease),
                border-color 0.25s var(--kodes-ease);
}
.kodes-project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -18px rgba(8, 62, 220, 0.25);
}

/* Typewriter cursor (landing demo) */
.kodes-caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: currentColor;
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: kodes-caret-blink 0.9s steps(2, end) infinite;
}
@keyframes kodes-caret-blink { 50% { opacity: 0; } }

/* Refined streaming pulse */
.kodes-streaming-pulse {
    display: inline-block;
    width: 2px;
    height: 1rem;
    background: var(--color-primary);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: kodes-pulse 1.1s ease-in-out infinite;
}
@keyframes kodes-pulse {
    0%, 100% { opacity: 0.25; transform: scaleY(0.7); }
    50% { opacity: 1; transform: scaleY(1); }
}

/* Subtle scrollbar for the app */
.kodes-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.kodes-scroll::-webkit-scrollbar-track { background: transparent; }
.kodes-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-base-300) 70%, transparent);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.kodes-scroll::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--color-primary) 40%, var(--color-base-300));
    background-clip: padding-box;
}

/* Chat bubble content refinements (used inside .prose) */
.kodes-chat .prose p { margin: 0.35em 0; }
.kodes-chat .prose p:first-child { margin-top: 0; }
.kodes-chat .prose p:last-child { margin-bottom: 0; }
.kodes-chat .prose pre {
    background: color-mix(in srgb, var(--color-base-300) 40%, var(--color-base-100));
    border-radius: var(--radius-field);
    padding: 0.75rem;
    font-size: 0.8125rem;
    overflow-x: auto;
}
.kodes-chat .prose code {
    background: color-mix(in srgb, var(--color-base-300) 35%, var(--color-base-100));
    padding: 0.1rem 0.35rem;
    border-radius: 0.35rem;
    font-size: 0.875em;
}

/* Active nav pill */
.kodes-nav-pill {
    position: relative;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.kodes-nav-pill[aria-current="page"] {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
}

/* Project sidebar — vertical row & mobile pill */
.kodes-section-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: color-mix(in srgb, var(--color-base-content) 75%, transparent);
    border-radius: 0.65rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.kodes-section-row:hover {
    background: color-mix(in srgb, var(--color-base-300) 35%, transparent);
    color: var(--color-base-content);
}
.kodes-section-row[aria-current="page"] {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    font-weight: 600;
}
.kodes-section-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 999px;
    color: color-mix(in srgb, var(--color-base-content) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-base-300) 60%, transparent);
    background: color-mix(in srgb, var(--color-base-100) 70%, transparent);
}
.kodes-section-pill[aria-current="page"] {
    border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-base-100));
}
.kodes-section-badge {
    margin-left: auto;
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
    color: var(--color-primary);
    font-weight: 600;
}
.kodes-section-pill .kodes-section-badge { display: none; }

/* Utility: animated underline on inline links */
.kodes-underline {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0% 100%;
    transition: background-size 0.3s var(--kodes-ease);
}
.kodes-underline:hover { background-size: 100% 1px; }