/* ============================================
   Controller Log - Global Styles
   Notion/Linear inspired minimal design
   ============================================ */

/* CSS Custom Properties (design tokens)
   Colors are stored as space-separated RGB triplets (--color-*-rgb) so that
   Tailwind can compose alpha modifiers via rgb(var(--x-rgb) / <alpha-value>).
   The full-value vars (--color-*) are derived and consumed by .prose etc. */
:root {
    /* RGB triplets (space-separated, for Tailwind alpha composition) */
    --color-bg-rgb:             255 255 255;
    --color-surface-rgb:        247 247 247;
    --color-text-rgb:           55 53 47;
    --color-text-secondary-rgb: 107 107 107;
    --color-accent-rgb:         35 131 226;
    --color-accent-hover-rgb:   27 110 194;
    --color-border-rgb:         232 232 232;

    /* Derived full values (kept for internal var(--color-text) style references) */
    --color-bg:             rgb(var(--color-bg-rgb));
    --color-surface:        rgb(var(--color-surface-rgb));
    --color-text:           rgb(var(--color-text-rgb));
    --color-text-secondary: rgb(var(--color-text-secondary-rgb));
    --color-accent:         rgb(var(--color-accent-rgb));
    --color-accent-hover:   rgb(var(--color-accent-hover-rgb));
    --color-border:         rgb(var(--color-border-rgb));

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", "Noto Sans JP", sans-serif;
    color-scheme: light;
}

/* Dark theme overrides - flip the RGB triplets, derived vars follow automatically */
html.dark {
    --color-bg-rgb:             26 25 23;
    --color-surface-rgb:        38 36 33;
    --color-text-rgb:           232 228 220;
    --color-text-secondary-rgb: 168 162 154;
    --color-accent-rgb:         82 168 235;
    --color-accent-hover-rgb:   108 185 245;
    --color-border-rgb:         58 55 50;
    color-scheme: dark;
}

/* Global EasyMDE dark overrides (shared by blog/post_form and tools/markdown_editor) */
html.dark .EasyMDEContainer .CodeMirror { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
html.dark .EasyMDEContainer .editor-toolbar { background: var(--color-bg); border-color: var(--color-border); }
html.dark .EasyMDEContainer .editor-toolbar button { color: var(--color-text-secondary); }
html.dark .EasyMDEContainer .editor-toolbar button:hover,
html.dark .EasyMDEContainer .editor-toolbar button.active { background: var(--color-surface); border-color: var(--color-border); }
html.dark .EasyMDEContainer .editor-preview,
html.dark .EasyMDEContainer .editor-preview-side { background: var(--color-bg); color: var(--color-text); }
html.dark .EasyMDEContainer .CodeMirror-cursor { border-left-color: var(--color-text); }
html.dark .EasyMDEContainer .CodeMirror-selected { background: rgba(var(--color-accent-rgb), 0.2); }
html.dark .EasyMDEContainer .editor-statusbar { color: var(--color-text-secondary); }
html.dark .EasyMDEContainer .CodeMirror .CodeMirror-code .cm-comment { background: transparent; }

/* Base typography */
body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Article content typography */
.prose {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text);
}

.prose h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: var(--color-text);
}

.prose h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
    color: var(--color-text);
}

.prose h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    color: var(--color-text);
}

.prose p {
    margin-bottom: 1rem;
}

.prose a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose a:hover {
    color: var(--color-accent-hover);
}

.prose code {
    font-size: 0.875em;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 0.125rem 0.375rem;
    font-family: "SF Mono", "Fira Code", "Fira Mono", monospace;
}

.prose pre {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1rem;
    overflow-x: auto;
    margin: 1.25rem 0;
}

.prose pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.875rem;
}

.prose blockquote {
    border-left: 3px solid var(--color-border);
    padding-left: 1rem;
    color: var(--color-text-secondary);
    margin: 1.25rem 0;
    font-style: italic;
}

.prose img {
    border-radius: 6px;
    margin: 1.5rem 0;
    max-width: 100%;
}

.prose ul, .prose ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.prose li {
    margin-bottom: 0.25rem;
}

.prose hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 2rem 0;
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Print styles - optimized for article PDF export */
@media print {
    /* Force light-mode RGB triplets for print regardless of active theme.
       CSS vars cascade from ancestor, so body's bg-page-bg/text-text-primary
       Tailwind tokens resolve to these light values when printing (even in dark mode). */
    :root, html.dark {
        --color-bg-rgb:             255 255 255;
        --color-surface-rgb:        247 247 247;
        --color-text-rgb:           55 53 47;
        --color-text-secondary-rgb: 107 107 107;
        --color-accent-rgb:         35 131 226;
        --color-accent-hover-rgb:   27 110 194;
        --color-border-rgb:         232 232 232;
    }

    body {
        background: white;
        color: black;
        font-size: 12pt;
        line-height: 1.6;
    }

    nav, footer, .no-print {
        display: none !important;
    }

    main {
        padding-top: 0 !important;
    }

    .prose {
        max-width: 100%;
    }

    .prose a {
        color: black;
        text-decoration: underline;
    }

    .prose a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    .prose pre, .prose code {
        border-color: #ccc;
        background: #f5f5f5;
    }

    .prose img {
        max-width: 100%;
        page-break-inside: avoid;
    }

    .prose h1, .prose h2, .prose h3 {
        page-break-after: avoid;
    }
}