/*
 * Modena — Editorial design system theme.
 *
 * Content-presentation tokens + base typography. Designed for blogs,
 * articles, documentation, and long-form essays. Editorial minimalism:
 * the UI disappears so the content takes center stage.
 *
 * Ports the relevant subset of the Modena reference into a Crema-style
 * theme.css that:
 *   • Defines the standard Crema design tokens (--background, --primary,
 *     --foreground, etc.) so all shadcn/lib-* components keep working.
 *   • Adds Modena-specific tokens (--mod-prose-*, --mod-text-*, etc.)
 *     consumed by lib-modena-ui components and the article surface.
 *   • Applies base typography to h1-h4, [data-slot="article"], and
 *     [data-slot="prose"] so any consumer of @crema/content-ui
 *     automatically picks up the editorial look.
 *
 * Pairs with: @crema/content-ui (article primitives), lib-modena-ui
 * (Modena-specific extra components).
 */

/* Newsreader for the editorial serif. Pulled at theme-import time so
 * consumers don't have to remember to import the font separately. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,700;1,6..72,400&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
    /* ── Crema-shaped tokens (apps and shadcn components consume these) ── */
    --background: oklch(1 0 0);
    --foreground: oklch(0.16 0.02 255);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.16 0.02 255);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.16 0.02 255);
    --primary: oklch(0.55 0.22 260);
    --primary-foreground: oklch(0.99 0.005 80);
    --secondary: oklch(0.96 0.005 250);
    --secondary-foreground: oklch(0.20 0.025 255);
    --muted: oklch(0.97 0.003 250);
    --muted-foreground: oklch(0.50 0.015 250);
    --accent: oklch(0.95 0.01 260);
    --accent-foreground: oklch(0.18 0.02 255);
    --destructive: oklch(0.55 0.22 25);
    --destructive-foreground: oklch(0.99 0.005 80);
    --success: oklch(0.65 0.18 145);
    --success-foreground: oklch(0.99 0.005 80);
    --warning: oklch(0.72 0.16 70);
    --warning-foreground: oklch(0.15 0.02 70);
    --border: oklch(0.92 0.005 250);
    --input: oklch(0.92 0.005 250);
    --ring: oklch(0.55 0.22 260);

    /* ── Chat surfaces ──
     * Contract for lib-agent-chat-ui / lib-agent-dock-ui. User bubble is
     * a filled, deep, high-contrast panel with light text; assistant
     * bubble is a card-like surface with a hairline border. */
    --chat-user-bg: oklch(0.48 0.2 260);
    --chat-user-fg: oklch(0.99 0.005 80);
    --chat-assistant-bg: oklch(0.98 0.003 250);
    --chat-assistant-fg: oklch(0.16 0.02 255);
    --chat-assistant-border: oklch(0.92 0.005 250);

    --radius: 0.5rem;
    --sidebar: oklch(0.985 0.003 250);
    --sidebar-foreground: oklch(0.16 0.02 255);
    --sidebar-accent: oklch(0.94 0.005 250);
    --sidebar-accent-foreground: oklch(0.20 0.025 255);
    --sidebar-border: oklch(0.92 0.005 250);
    --sidebar-ring: oklch(0.55 0.22 260);
    --sidebar-primary: oklch(0.55 0.22 260);
    --sidebar-primary-foreground: oklch(0.99 0.005 80);

    /* ── Modena-specific tokens ─────────────────────────────────────── */

    /* Accent — duplicate of --primary so Modena components can read
     * either. Override --mod-accent at the app/site level to brand. */
    --mod-accent: var(--primary);

    /* Gray scale (11 steps, matches Modena's reference). */
    --mod-gray-50:  oklch(0.985 0.002 250);
    --mod-gray-100: oklch(0.965 0.003 250);
    --mod-gray-200: oklch(0.92 0.004 250);
    --mod-gray-300: oklch(0.86 0.006 250);
    --mod-gray-400: oklch(0.70 0.012 250);
    --mod-gray-500: oklch(0.55 0.018 250);
    --mod-gray-600: oklch(0.45 0.020 250);
    --mod-gray-700: oklch(0.36 0.022 250);
    --mod-gray-800: oklch(0.24 0.024 250);
    --mod-gray-900: oklch(0.17 0.025 250);
    --mod-gray-950: oklch(0.10 0.025 250);

    /* Text */
    --mod-text: var(--foreground);
    --mod-text-secondary: oklch(0.42 0.020 250);
    --mod-text-muted: var(--muted-foreground);
    --mod-text-faint: oklch(0.68 0.012 250);

    /* Prose */
    --mod-prose-color: oklch(0.22 0.022 250);
    --mod-prose-size: clamp(1.1875rem, 1.0625rem + 0.4vw, 1.3125rem);
    --mod-prose-line-height: 1.7;
    --mod-prose-max-width: 720px;
    --mod-prose-tracking: -0.011em;

    /* Inline code */
    --mod-code-color: oklch(0.55 0.22 350);
    --mod-code-bg: var(--muted);
    --mod-code-border: var(--border);

    /* Code block (dark always) */
    --mod-bg-code: oklch(0.16 0.020 250);
    --mod-bg-code-fg: oklch(0.92 0.010 80);
    --mod-bg-code-header: oklch(0.13 0.020 250);

    /* Status colors */
    --mod-info: oklch(0.55 0.22 260);
    --mod-info-bg: color-mix(in oklch, oklch(0.55 0.22 260) 6%, transparent);
    --mod-info-border: color-mix(in oklch, oklch(0.55 0.22 260) 20%, transparent);
    --mod-success: oklch(0.65 0.18 145);
    --mod-success-bg: color-mix(in oklch, oklch(0.65 0.18 145) 6%, transparent);
    --mod-success-border: color-mix(in oklch, oklch(0.65 0.18 145) 20%, transparent);
    --mod-warning: oklch(0.72 0.16 70);
    --mod-warning-bg: color-mix(in oklch, oklch(0.72 0.16 70) 6%, transparent);
    --mod-warning-border: color-mix(in oklch, oklch(0.72 0.16 70) 20%, transparent);
    --mod-danger: oklch(0.55 0.22 25);
    --mod-danger-bg: color-mix(in oklch, oklch(0.55 0.22 25) 6%, transparent);
    --mod-danger-border: color-mix(in oklch, oklch(0.55 0.22 25) 20%, transparent);

    /* Fonts */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
    --mod-font-body: "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-ai-prose: var(--mod-font-body);

    /* Letter-spacing scale */
    --mod-tracking: -0.011em;
    --mod-tracking-tight: -0.02em;
    --mod-tracking-heading: -0.025em;
    --mod-tracking-wide: 0.04em;

    /* Spacing (Modena's 4px grid) */
    --mod-space-1: 4px;
    --mod-space-2: 8px;
    --mod-space-3: 12px;
    --mod-space-4: 16px;
    --mod-space-5: 20px;
    --mod-space-6: 24px;
    --mod-space-8: 32px;
    --mod-space-10: 40px;
    --mod-space-12: 48px;
    --mod-space-16: 64px;

    /* Radius scale */
    --mod-radius-sm: 4px;
    --mod-radius: 6px;
    --mod-radius-md: 8px;
    --mod-radius-lg: 12px;
    --mod-radius-xl: 16px;
    --mod-radius-pill: 9999px;

    /* Type scale (Crema-shaped) */
    --text-display-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
    --text-display-lh: 1.1;
    --text-headline-size: clamp(2rem, 1.7rem + 1.2vw, 2.5rem);
    --text-headline-lh: 1.15;
    --text-title-size: 1.5rem;
    --text-title-lh: 1.3;
    --text-body-size: 1rem;
    --text-body-lh: 1.6;
    --text-label-size: 0.875rem;
    --text-label-lh: 1.4;
    --text-caption-size: 0.75rem;
    --text-caption-lh: 1.4;

    /* Motion */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;
    --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-decelerate: cubic-bezier(0, 0, 0.25, 1);

    /* Elevation */
    --elevation-0: none;
    --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.04);
    --elevation-2: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
    --elevation-3: 0 4px 8px -2px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
    --elevation-4: 0 12px 24px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -4px rgba(0, 0, 0, 0.03);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── DARK MODE ──────────────────────────────────────────────────── */
.dark {
    --background: oklch(0.13 0.018 250);
    --foreground: oklch(0.95 0.010 250);
    --card: oklch(0.17 0.020 250);
    --card-foreground: oklch(0.95 0.010 250);
    --popover: oklch(0.17 0.020 250);
    --popover-foreground: oklch(0.95 0.010 250);
    --primary: oklch(0.65 0.22 260);
    --primary-foreground: oklch(0.99 0.005 80);
    --secondary: oklch(0.22 0.020 250);
    --secondary-foreground: oklch(0.92 0.010 250);
    --muted: oklch(0.20 0.020 250);
    --muted-foreground: oklch(0.65 0.020 250);
    --accent: oklch(0.24 0.022 250);
    --accent-foreground: oklch(0.92 0.010 250);
    --border: oklch(0.27 0.020 250);
    --input: oklch(0.27 0.020 250);
    --ring: oklch(0.65 0.22 260);

    /* ── Chat surfaces (dark) ── */
    --chat-user-bg: oklch(0.55 0.2 260);
    --chat-user-fg: oklch(0.99 0.005 80);
    --chat-assistant-bg: oklch(0.20 0.020 250);
    --chat-assistant-fg: oklch(0.95 0.010 250);
    --chat-assistant-border: oklch(0.27 0.020 250);

    --sidebar: oklch(0.11 0.018 250);
    --sidebar-foreground: oklch(0.92 0.010 250);
    --sidebar-accent: oklch(0.22 0.022 250);
    --sidebar-accent-foreground: oklch(0.92 0.010 250);
    --sidebar-border: oklch(0.25 0.020 250);
    --sidebar-primary: oklch(0.65 0.22 260);
    --sidebar-primary-foreground: oklch(0.99 0.005 80);

    --mod-text: var(--foreground);
    --mod-text-secondary: oklch(0.65 0.020 250);
    --mod-text-muted: oklch(0.55 0.020 250);
    --mod-text-faint: oklch(0.40 0.018 250);
    --mod-prose-color: oklch(0.86 0.012 250);
    --mod-code-color: oklch(0.78 0.22 350);
    --mod-code-bg: oklch(0.22 0.020 250);
    --mod-code-border: oklch(0.30 0.020 250);
}

/* ── BASE TYPOGRAPHY ─────────────────────────────────────────────
 * Caffe Florian's theme applies serif font-heading to h1-h4 globally;
 * Modena keeps headings in Inter sans. Apply explicitly so it sticks
 * regardless of cascade order with other themes' base layers. */
html {
    font-family: var(--font-sans);
}

h1, h2, h3, h4,
[data-slot="card-title"],
[data-slot="dialog-title"],
[data-slot="sheet-title"],
[data-slot="alert-dialog-title"] {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: var(--mod-tracking-heading);
}

/* ── ARTICLE SURFACE ─────────────────────────────────────────────
 * Targets @crema/content-ui's data-slot attributes. Anyone using
 *   <Article><ArticleHeader/><Prose>...</Prose></Article>
 * automatically picks up the editorial look. Outside [data-slot="article"]
 * Prose stays neutral (so comment bodies don't get drop-cap/serif). */

[data-slot="article"] {
    max-width: var(--mod-prose-max-width);
    margin-inline: auto;
    padding-inline: var(--mod-space-6);
    color: var(--mod-text);
}

[data-slot="article"] [data-slot="article-header"] {
    text-align: center;
    padding-top: var(--mod-space-16);
    margin-bottom: 3vmin;
    border: none;
}
[data-slot="article"] [data-slot="article-header"] h1 {
    font-family: var(--font-sans);
    font-size: var(--text-display-size);
    line-height: var(--text-display-lh);
    letter-spacing: var(--mod-tracking-heading);
    font-weight: 800;
    margin-top: 0.5rem;
    color: var(--mod-text);
}
[data-slot="article"] [data-slot="article-header"] p {
    font-family: var(--mod-font-body);
    font-optical-sizing: auto;
    font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
    line-height: 1.5;
    color: var(--mod-text-secondary);
    margin: 0.75em auto 0;
    max-width: 36rem;
}
[data-slot="article"] [data-slot="article-header"] > div:first-child {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: var(--mod-tracking-wide);
    text-transform: uppercase;
    color: var(--mod-accent);
}
[data-slot="article"] [data-slot="article-meta"] {
    justify-content: center;
    padding-top: var(--mod-space-6);
    margin-top: var(--mod-space-6);
    font-size: 0.875rem;
    color: var(--mod-text-muted);
}

[data-slot="article"] [data-slot="prose"] {
    font-family: var(--mod-font-body);
    font-optical-sizing: auto;
    font-size: var(--mod-prose-size);
    line-height: var(--mod-prose-line-height);
    letter-spacing: var(--mod-prose-tracking);
    color: var(--mod-prose-color);
}
[data-slot="article"] [data-slot="prose"] > * + * {
    margin-top: 1.5em;
}
[data-slot="article"] [data-slot="prose"] :where(p) { margin: 0; }

[data-slot="article"] [data-slot="prose"] :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--mod-tracking-heading);
    color: var(--mod-text);
}
[data-slot="article"] [data-slot="prose"] :where(h2) {
    font-size: 1.875rem;
    margin-top: 2.4em;
    margin-bottom: 0.6em;
}
[data-slot="article"] [data-slot="prose"] :where(h3) {
    font-size: 1.5rem;
    margin-top: 2em;
    margin-bottom: 0.5em;
}
[data-slot="article"] [data-slot="prose"] :where(h4) {
    font-size: 1.25rem;
    margin-top: 1.8em;
    margin-bottom: 0.4em;
}

[data-slot="article"] [data-slot="prose"] :where(strong) {
    font-weight: 700;
    color: var(--mod-text);
}

[data-slot="article"] [data-slot="prose"] :where(ul, ol) {
    padding-left: 1.5em;
    margin: 0;
}
[data-slot="article"] [data-slot="prose"] :where(li + li) {
    margin-top: 0.4em;
}
[data-slot="article"] [data-slot="prose"] :where(li::marker) {
    color: var(--mod-text-faint);
}

[data-slot="article"] [data-slot="prose"] :where(blockquote) {
    position: relative;
    font-size: 1.25em;
    font-weight: 500;
    line-height: 1.5;
    color: var(--mod-text);
    padding: 0 0 0 1.5em;
    margin: 2em 0;
    border: none;
    font-style: normal;
}
[data-slot="article"] [data-slot="prose"] :where(blockquote)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--mod-accent);
    border-radius: 2px;
}
[data-slot="article"] [data-slot="prose"] :where(blockquote p) { margin: 0; }
[data-slot="article"] [data-slot="prose"] :where(blockquote p + p) { margin-top: 0.6em; }

[data-slot="article"] [data-slot="prose"] :where([data-slot="pullquote"]) {
    font-family: var(--mod-font-body);
    font-size: 1.625em;
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    padding: 0;
    color: var(--mod-text);
    margin: 2.5em 0;
}
[data-slot="article"] [data-slot="prose"] :where([data-slot="pullquote"])::before {
    display: none;
}

[data-slot="article"] [data-slot="prose"] :where(hr) {
    border: none;
    border-top: 1px solid var(--border);
    opacity: 0.6;
    margin: 3em 0;
    width: auto;
    height: auto;
    background: transparent;
}

[data-slot="article"] [data-slot="prose"] :where(:not(pre) > code) {
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--mod-code-color);
    background: var(--mod-code-bg);
    border: 1px solid var(--mod-code-border);
    border-radius: var(--mod-radius-sm);
    padding: 0.1em 0.35em;
}
[data-slot="article"] [data-slot="prose"] :where(pre) {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.65;
    background: var(--mod-bg-code);
    color: var(--mod-bg-code-fg);
    border-radius: var(--mod-radius-md);
    padding: var(--mod-space-5);
    overflow-x: auto;
    margin: 2em 0;
}
[data-slot="article"] [data-slot="prose"] :where(pre code) {
    background: transparent;
    color: inherit;
    border: none;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

[data-slot="article"] [data-slot="prose"] :where(a) {
    color: var(--mod-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--duration-fast) var(--ease-standard);
}
[data-slot="article"] [data-slot="prose"] :where(a:hover) {
    color: color-mix(in oklch, var(--mod-accent) 75%, var(--foreground));
}