@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+Mono:wght@100..900&display=swap");

body {
    font-family: "Noto Sans JP", sans-serif;
    --font-default: "Noto Sans JP", sans-serif;
    --font-heading: "Noto Sans JP", sans-serif;
    --font-ui: "Noto Sans JP", sans-serif;
    --font-mono: "Noto Sans Mono", monospace;

    /* Font sizes */
    --font-text-size: 17px;
    --font-small: 15px;
    --font-smaller: 13px;
    --font-smallest: 12px;
    --font-inputs: 15px;

    /* Font weights */
    --normal-weight: 400;
    --bold-weight: 600;
    --link-weight: 500;

    /* Headings */
    --page-title-weight: 600;
    --page-title-line-height: 1.25;

    --h1: 1.75rem;
    --h2: 1.45rem;
    --h3: 1.35rem;
    --h4: 1rem;
    --h5: 0.85rem;
    --h6: 0.75rem;

    --h1-weight: 700;
    --h2-weight: 600;
    --h3-weight: 500;
    --h4-weight: 500;
    --h5-weight: 500;
    --h6-weight: 500;

    /* Cards */
    --cards-min-width: 280px;
    --cards-max-width: 620px;
    --cards-mobile-width: 100%;
    --cards-image-height: 320px;
    --cards-padding: 1.6rem;
    --cards-image-fit: cover;
    --cards-background: var(--bg-secondary);
    --cards-border-width: 1px;
    --cards-aspect-ratio: auto;
    --cards-columns: repeat(auto-fit, minmax(var(--cards-min-width), 1fr));

    /* Borders & Radii */
    --image-radius: 16px;
    --border-width: 1px;
    --border-radius: 12px;

    /* Spacing */
    --folding-offset: 18px;
    --nested-padding: 32px;
    --list-padding: 1.6rem;
    --list-spacing: 0.15rem;

    /* Syntax colors */
    --code-red: #cb071d;
    --code-green: #7eac21;
    --code-yellow: #a47d00;
    --code-blue: #0277aa;
    --code-magenta: #ae166b;
    --code-purple: #0277aa;
    --code-aqua: #1b8ea6;
    --code-orange: #c44d5a;
    --code-gray: #5f6672;
    --code-comment: #6f7d8d;
    --code-namespace: #6b1e3c;
    --code-hover-bg: rgba(128, 128, 128, 0.1);
}

/* Primary colors aligned with Thinking Machines palette */
.theme-light,
.theme-dark {
    --color-primary: #0e9ee4;
    --color-primary-hover: #0c82c0;

    --color-red: #ef402c;
    --color-orange: #af3a03;
    --color-yellow: #b57614;
    --color-green: #9cc355;
    --color-cyan: #1b8ea6;
    --color-blue: #0e9ee4;
    --color-purple: #8f3f71;
    --color-magenta: #ae166b;

    --color-accent: var(--color-primary);
    --color-success: var(--color-green);
    --color-warning: var(--color-orange);
    --color-error: var(--color-red);
    --color-info: var(--color-blue);
}

.theme-light {
    --bg-primary: #ffffff;
    --bg-secondary: #f3f3f2;
    --bg-tertiary: #e1e1df;

    --text-primary: #282828;
    --text-secondary: #504945;
    --text-muted: #6b6866;
    --text-faint: #969696;

    --border-color: rgba(40, 40, 40, 0.12);
    --border-hover: rgba(40, 40, 40, 0.2);

    --link-color: #282828;
    --link-hover: var(--color-primary);

    --tag-bg: linear-gradient(180deg, #ffffff 0%, #f3f3f2 94%);
    --tag-text: color-mix(in srgb, var(--text-primary) 65%, transparent);

    --selection-bg: rgba(0, 0, 0, 0.12);
}

.theme-dark {
    --bg-primary: #000000;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #262626;

    --text-primary: #f0f0f0;
    --text-secondary: #d0d0d0;
    --text-muted: #b0b0b0;
    --text-faint: #8a8a8a;

    --border-color: rgba(255, 255, 255, 0.18);
    --border-hover: rgba(255, 255, 255, 0.32);

    --link-color: #f0f0f0;
    --link-hover: var(--color-primary);

    --tag-bg: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    --tag-text: color-mix(in srgb, var(--text-primary) 80%, transparent);

    --selection-bg: rgba(255, 255, 255, 0.24);

    --code-red: #ff7a86;
    --code-green: #b6d968;
    --code-yellow: #ffd36e;
    --code-blue: #5fb6de;
    --code-magenta: #ff66b3;
    --code-purple: #5fb6de;
    --code-aqua: #95e3f2;
    --code-orange: #ff9bb3;
    --code-gray: #c8c8c8;
    --code-comment: #9aa9b7;
    --code-namespace: #d07b9a;
    --code-hover-bg: rgba(128, 128, 128, 0.32);
}

/* Map to Obsidian theme variables */
.theme-dark,
.theme-light {
    --background-primary: var(--bg-primary);
    --background-primary-alt: var(--bg-secondary);
    --background-secondary: var(--bg-secondary);
    --background-secondary-alt: var(--bg-tertiary);
    --background-modifier-border: var(--border-color);
    --background-modifier-border-hover: var(--border-hover);
    --text-normal: var(--text-primary);
    --text-muted: var(--text-secondary);
    --text-faint: var(--text-faint);
    --interactive-accent: var(--color-primary);
    --interactive-accent-hover: var(--color-primary-hover);
    --text-accent: var(--link-color);
    --text-accent-hover: var(--link-hover);
    --text-selection: var(--selection-bg);
}

/* Typography improvements */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    line-height: 1.3;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h1 {
    font-size: var(--h1);
    font-weight: var(--h1-weight);
}

h2 {
    font-size: var(--h2);
    font-weight: var(--h2-weight);
}

h3 {
    font-size: var(--h3);
    font-weight: var(--h3-weight);
    font-style: italic;
}

h4 {
    font-size: var(--h4);
    font-weight: var(--h4-weight);
    font-style: italic;
}

h5 {
    font-size: var(--h5);
    font-weight: var(--h5-weight);
    font-style: italic;
}

h6 {
    font-size: var(--h6);
    font-weight: var(--h6-weight);
    font-style: italic;
}

/* Modern card styles */
.table-cards table tbody > tr,
.list-cards.markdown-preview-view div > ul > li {
    background: var(--cards-background);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: none;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.table-cards table tbody > tr:hover,
.list-cards.markdown-preview-view div > ul > li:hover {
    border-color: var(--border-hover);
    box-shadow: 0 18px 32px -24px rgba(18, 18, 18, 0.45);
    transform: translateY(-3px);
}

/* Modern tag styles */
.markdown-preview-view .tag:not(.token) {
    background: var(--tag-bg);
    color: var(--tag-text);
    padding: 0.25em 0.75em;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-weight: 450;
    border: 1px solid rgba(0, 0, 0, 0.07);
    transition: all 0.15s ease;
}

.markdown-preview-view a {
    color: var(--link-color);
    text-decoration: underline;
    text-decoration-color: color-mix(
        in srgb,
        var(--link-color) 30%,
        transparent
    );
    text-underline-offset: 0.18em;
    transition:
        color 0.3s ease-in-out,
        text-decoration-color 0.3s ease-in-out;
}

.markdown-preview-view a:hover {
    color: var(--link-hover);
    text-decoration-color: color-mix(
        in srgb,
        var(--link-hover) 30%,
        transparent
    );
}

.markdown-preview-view .tag:not(.token):hover {
    background-color: color-mix(in srgb, var(--bg-tertiary) 70%, transparent);
    border-color: var(--border-hover);
}

.theme-dark .markdown-preview-view .tag:not(.token) {
    border-color: rgba(255, 255, 255, 0.18);
}

/* Modern table styles */
.markdown-preview-view table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin: 1.5em 0;
    background: var(--bg-primary);
}

.markdown-preview-view ul {
    list-style-type: square;
    margin-left: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1.2rem;
}

.markdown-preview-view ol {
    list-style-type: decimal;
    margin-left: 2rem;
    margin-top: 1rem;
    margin-bottom: 1.2rem;
}

.markdown-preview-view li {
    margin-bottom: 0.25rem;
}

.markdown-preview-view th {
    background-color: color-mix(in srgb, var(--bg-secondary) 82%, white 18%);
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.markdown-preview-view td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.markdown-preview-view tr:last-child td {
    border-bottom: none;
}

.markdown-preview-view blockquote {
    background: color-mix(
        in srgb,
        var(--bg-secondary) 92%,
        var(--border-color) 8%
    );
    border: none;
    border-radius: 12px;
    color: var(--text-secondary);
    font-style: normal;
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 1.4rem 0 1.4rem 0;
    padding: 1rem 1.5rem 1rem 2.2rem;
    position: relative;
}

.markdown-preview-view blockquote::before {
    content: "";
    position: absolute;
    left: 1.1rem;
    top: 0.9rem;
    bottom: 0.9rem;
    width: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border-hover) 80%, transparent);
}

.theme-dark .markdown-preview-view blockquote {
    background: color-mix(
        in srgb,
        var(--bg-secondary) 70%,
        rgba(255, 255, 255, 0.06) 30%
    );
    color: color-mix(in srgb, var(--text-primary) 85%, transparent);
}

/* Code block improvements */
.markdown-preview-view pre {
    background: color-mix(
        in srgb,
        var(--bg-secondary) 94%,
        var(--border-color) 6%
    );
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.5;
    overflow-x: auto;
    position: relative;
}

.theme-dark .markdown-preview-view pre {
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent 8%);
    border-color: rgba(255, 255, 255, 0.14);
}

.markdown-preview-view pre code {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: inherit;
}

.markdown-preview-view code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    padding: 0.2em 0.4em;
    background-color: color-mix(in srgb, var(--bg-secondary) 90%, white 10%);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--color-red);
    letter-spacing: 0;
}

/* Improved scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

/* Mobile optimizations */
@media (max-width: 640px) {
    body {
        --font-text-size: 15px;
        --cards-padding: 1rem;
        --list-padding: 1.5rem;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.375rem;
    }

    h3 {
        font-size: 1.125rem;
    }
}

/* Remove Obsidian branding */
.site-footer a {
    display: none;
}

/* Mermaid diagram styles */
.mermaid {
    font-family: var(--font-default);
    background-color: transparent !important;
}

/* Node styles */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon,
.mermaid .node path {
    fill: var(--bg-secondary) !important;
    stroke: var(--border-color) !important;
    stroke-width: 2px !important;
}

/* Text in nodes */
.mermaid .node .label {
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
}

/* Edge labels */
.mermaid .edgeLabel .label {
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
}

.mermaid .edgeLabel {
    background-color: var(--bg-primary) !important;
}

.mermaid .edgeLabel rect {
    fill: var(--bg-primary) !important;
    opacity: 0.8 !important;
}

/* Arrow lines */
.mermaid .flowchart-link {
    stroke: var(--text-muted) !important;
}

/* Arrowheads */
.mermaid .marker {
    fill: var(--text-muted) !important;
    stroke: var(--text-muted) !important;
}

/* Specific node types */
.mermaid .node.default rect {
    rx: var(--border-radius) !important;
    ry: var(--border-radius) !important;
}

/* Decision nodes (diamond shape) */
.mermaid .node.rhombus polygon {
    fill: var(--bg-tertiary) !important;
    stroke: var(--color-primary) !important;
}

/* Selected/hover state */
.mermaid .node:hover rect,
.mermaid .node:hover circle,
.mermaid .node:hover ellipse,
.mermaid .node:hover polygon {
    fill: var(--bg-tertiary) !important;
    stroke: var(--color-primary) !important;
    filter: brightness(1.1);
    transition: all 0.2s ease;
}

/* Dark theme specific overrides */
.theme-dark .mermaid .node rect,
.theme-dark .mermaid .node circle,
.theme-dark .mermaid .node ellipse,
.theme-dark .mermaid .node polygon {
    fill: var(--bg-secondary) !important;
    stroke: var(--border-color) !important;
}

.theme-dark .mermaid .node.rhombus polygon {
    fill: var(--bg-tertiary) !important;
    stroke: var(--color-primary) !important;
}

/* Dark theme hover states */
.theme-dark .mermaid .node:hover rect,
.theme-dark .mermaid .node:hover circle,
.theme-dark .mermaid .node:hover ellipse,
.theme-dark .mermaid .node:hover polygon {
    fill: var(--bg-tertiary) !important;
    stroke: var(--color-primary) !important;
    filter: brightness(1.2);
    transition: all 0.2s ease;
}

/* Force text color in dark mode */
.theme-dark .mermaid .nodeLabel,
.theme-dark .mermaid .label {
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
}

.theme-dark .mermaid .edgeLabel .label {
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
}

.theme-dark .mermaid .flowchart-link {
    stroke: var(--text-secondary) !important;
}

.theme-dark .mermaid .marker {
    fill: var(--text-secondary) !important;
    stroke: var(--text-secondary) !important;
}

/* Additional specificity for text elements */
.theme-dark .mermaid text {
    fill: var(--text-primary) !important;
}

.theme-dark .mermaid .edgeLabel text {
    fill: var(--text-primary) !important;
}

/* Ensure transitions work */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon {
    transition: all 0.2s ease;
}