/* ============================================
   ORIEN STAR — Visual Theme Only
   Fonts, colors, design. No layout overrides.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300;1,9..40,400&family=JetBrains+Mono:wght@300;400&display=swap');

/* ============================================
   COLOR PALETTE — Acid Sutra
   ============================================ */

:root {
    --acid-deep: #1a1620;
    --acid-warm: #252030;
    --acid-soft: #3a3040;
    --acid-muted: #4a4050;
    
    --cream-light: #faf7f5;
    --cream-warm: #f0ebe8;
    --cream-aged: #e0d8d8;
    --cream-dark: #c8c0c0;
    
    --acid-magenta: #d4789c;
    --acid-rose: #c4607a;
    --acid-teal: #6ab0a0;
    --acid-teal-deep: #4a9a8a;
    --acid-gold: #c9a050;
    --acid-purple: #9878b8;
    --acid-lavender: #8868a8;
    
    --text-dark: #2a2225;
    --text-dark-muted: #5a4a50;
    --text-dark-faint: #8a7a80;
    
    --text-light: #e0d8d0;
    --text-light-muted: #a090a0;
    --text-light-faint: #706068;
}

/* ============================================
   LIGHT THEME
   ============================================ */

.theme-light {
    --background-primary: var(--cream-light);
    --background-secondary: var(--cream-warm);
    --background-modifier-border: var(--cream-aged);
    --text-normal: var(--text-dark);
    --text-muted: var(--text-dark-muted);
    --text-faint: var(--text-dark-faint);
    --text-accent: var(--acid-rose);
    --interactive-accent: var(--acid-rose);
    --link-color: var(--acid-rose);
    --link-color-hover: var(--acid-magenta);
    --accent-color: var(--acid-purple);
}

/* ============================================
   DARK THEME
   ============================================ */

.theme-dark {
    --background-primary: var(--acid-deep);
    --background-secondary: var(--acid-warm);
    --background-modifier-border: var(--acid-soft);
    --text-normal: var(--text-light);
    --text-muted: var(--text-light-muted);
    --text-faint: var(--text-light-faint);
    --text-accent: var(--acid-magenta);
    --interactive-accent: var(--acid-magenta);
    --link-color: var(--acid-magenta);
    --link-color-hover: var(--cream-warm);
    --accent-color: var(--acid-gold);
}

/* ============================================
   BASE STYLES
   ============================================ */

body {
    background: var(--background-primary);
    color: var(--text-normal);
}

.published-container {
    background: var(--background-primary);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

/* ============================================
   SITE TITLE
   ============================================ */

.site-body-left-column-site-name,
.site-header-text,
.publish-site-name,
.site-name {
    font-family: 'Instrument Serif', Georgia, serif !important;
    font-weight: 400 !important;
}

/* ============================================
   TYPOGRAPHY — Headings
   ============================================ */

.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6,
.publish-article-heading,
.inline-title {
    font-family: 'Instrument Serif', Georgia, serif !important;
    font-weight: 400;
    line-height: 1.2;
}

.markdown-preview-view h1,
.publish-article-heading,
.inline-title {
    letter-spacing: -0.02em;
    color: var(--text-normal);
}

.markdown-preview-view h2 {
    color: var(--accent-color);
}

/* ============================================
   TYPOGRAPHY — Body
   ============================================ */

.markdown-preview-view p {
    font-family: 'DM Sans', sans-serif;
    line-height: 1.6;
}

.markdown-preview-view em {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
}

.markdown-preview-view strong {
    font-weight: 500;
    color: var(--accent-color);
}

/* ============================================
   LINKS
   ============================================ */

.markdown-preview-view a,
.internal-link,
.external-link {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.markdown-preview-view a:hover,
.internal-link:hover,
.external-link:hover {
    color: var(--link-color-hover);
}

/* ============================================
   LISTS — Arrow markers
   ============================================ */

.markdown-preview-view ul {
    list-style: none;
    padding-left: 0;
}

.markdown-preview-view ul li {
    padding-left: 1.5em;
    position: relative;
}

.markdown-preview-view ul li::before {
    content: "→";
    color: var(--link-color);
    position: absolute;
    left: 0;
}

/* ============================================
   BLOCKQUOTES
   ============================================ */

.markdown-preview-view blockquote {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    color: var(--text-muted);
    border-left: 3px solid var(--link-color);
}

/* ============================================
   CODE
   ============================================ */

.markdown-preview-view code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
    background: var(--background-secondary);
}

.markdown-preview-view pre {
    font-family: 'JetBrains Mono', monospace;
    background: var(--background-secondary);
    border-left: 3px solid var(--link-color);
}

/* ============================================
   SELECTION
   ============================================ */

.theme-light ::selection {
    background: var(--acid-gold);
    color: var(--cream-light);
}

.theme-dark ::selection {
    background: var(--acid-magenta);
    color: var(--acid-deep);
}

/* ============================================
   PAGE WIDTH — Centered content, full-bleed background
   ============================================ */

.markdown-preview-view {
    max-width: 750px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.site-body,
.site-body-center-column,
.page-container,
.published-container {
    background: var(--background-primary);
}

.site-body-center-column {
    display: flex;
    justify-content: center;
}