:root {
    --color-primary: #3B82F6;
    --color-secondary: #1E40AF;
    --color-accent: #10B981;
    --color-dark: #1F2937;
    --color-light: #F3F4F6
}

.bg-light {
    background-color: var(--color-light)
}

.bg-dark {
    background-color: var(--color-dark)
}

.bg-accent {
    background-color: var(--color-accent)
}

.bg-secondary {
    background-color: var(--color-secondary)
}

.bg-primary {
    background-color: var(--color-primary)
}

.text-dark {
    color: var(--color-dark)
}

.text-light {
    color: var(--color-light)
}

.text-accent {
    color: var(--color-accent)
}

.text-secondary {
    color: var(--color-secondary)
}

.text-primary {
    color: var(--color-primary)
}

.article-content p {
    margin-bottom: 1rem;
    line-height: 1.7
}

.article-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 1.5rem 0 1rem;
    color: #1e40af
}

.article-content blockquote {
    border-left: 4px solid #3b82f6;
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic
}

.hidden-content,
.tab-content {
    display: none
}

.dropdown.active .dropdown-content,
.tab-content.active {
    display: block
}

.news-card:hover {
    transform: translateY(-5px);
    transition: .3s
}

.editor-content {
    min-height: 400px;
    border: 1px solid #e2e8f0;
    border-radius: .375rem;
    padding: 1rem
}

.editor-content:focus {
    outline: 0;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1)
}

.toolbar-btn {
    padding: .5rem;
    border-radius: .5rem;
    transition-property: background-color, color;
    transition-duration: 150ms;
    transition-timing-function: ease
}

.toolbar-btn:hover {
    background-color: #f3f4f6
}

.toolbar-btn.active {
    background-color: #dbeafe;
    color: #2563eb
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .1);
    z-index: 1;
    border-radius: .375rem;
    padding: .5rem
}

.autosave-indicator {
    transition: .3s
}

.ProseMirror {
    min-height: 400px;
    padding: 1rem;
    outline: 0
}

.ProseMirror h1 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 1rem
}

.ProseMirror h2 {
    font-size: 1.875rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: .75rem
}

.ProseMirror h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: .5rem
}

.ProseMirror blockquote {
    border-left: 4px solid #ddd;
    padding-left: 1rem;
    margin-left: 0;
    color: #666;
    font-style: italic
}

.ProseMirror pre {
    background: #1e293b;
    color: #f8fafc;
    padding: 1rem;
    border-radius: .375rem;
    overflow-x: auto
}

.ProseMirror code {
    background: #e2e8f0;
    padding: .2rem .4rem;
    border-radius: .2rem;
    font-size: .9em
}

.ProseMirror ol,
.ProseMirror ul {
    padding-left: 1.5rem;
    margin: .75rem 0
}

.ProseMirror li {
    margin: .25rem 0
}

.ProseMirror table {
    border-collapse: collapse;
    margin: 1rem 0;
    width: 100%
}

.ProseMirror td,
.ProseMirror th {
    border: 1px solid #ddd;
    padding: .5rem
}

.ProseMirror th {
    background: #f1f5f9
}

.ProseMirror img {
    max-width: 100%;
    height: auto;
    border-radius: .375rem
}

.color-option {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-block;
    margin: 4px;
    cursor: pointer;
    border: 2px solid transparent
}

.color-option:hover {
    border-color: #ccc
}

.color-option.active {
    border-color: #333;
    transform: scale(1.1)
}

.modal {
    transition: opacity .3s;
    opacity: 0;
    pointer-events: none
}

.modal-content {
    transform: scale(.9);
    transition: transform .3s
}

.modal.active {
    opacity: 1;
    pointer-events: auto
}

.modal.active .modal-content {
    transform: scale(1)
}

.dropdown {
    position: relative;
    display: inline-block
}

.link-modal-input {
    width: 100%;
    padding: .5rem;
    border: 1px solid #ddd;
    border-radius: .25rem;
    margin-bottom: 1rem
}

#dropZone.dragover {
    background-color: #eff6ff;
    border-color: #3b82f6
}

table {
    width: 100%;
    text-align: center
}

td {
    padding: 5px;
    border: 1px solid gray
}

/* Global reset for blog content */
.blog-content {  
  margin: 0 auto;     /* center align */  
  line-height: 1.7;   /* better reading */
  font-size: 1rem;    /* base font */
  color: #333;        /* comfortable text color */
}

/* Headings */
.blog-content h1,
.blog-content h2,
.blog-content h3 {
  font-weight: 700;
  margin: 1.2em 0 0.6em;
  line-height: 1.3;
}

.blog-content h1 { font-size: 2rem; }
.blog-content h2 { font-size: 1.5rem; }
.blog-content h3 { font-size: 1.25rem; }

/* Paragraphs */
.blog-content p {
  margin-bottom: 1em;
}

/* Lists */
.blog-content ul,
.blog-content ol {
  margin: 1em 0;
  padding-left: 1.5em;       /* keeps inside the box */
  list-style-position: outside;
}

.blog-content ul {
  list-style-type: disc;     /* bullets for unordered list */
}

.blog-content ol {
  list-style-type: decimal;  /* numbers for ordered list */
}

.blog-content li {
  display: list-item;        /* ensure bullets/numbers show */
  margin-bottom: 0.5em;
}

/* Blockquotes */
.blog-content blockquote {
  border-left: 4px solid #ddd;
  padding-left: 1em;
  margin: 1.5em 0;
  font-style: italic;
  color: #555;
}

/* Images */
.blog-content img {
  max-width: 100%;   /* responsive */
  height: auto;
  border-radius: 8px;
  
}

/* Code blocks */
.blog-content pre,
.blog-content code {
  font-family: "Fira Code", monospace;
  background: #f5f5f5;
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

.blog-content pre {
  padding: 1em;
  overflow-x: auto;
}

/* Links */
.blog-content a {
  color: #0077cc;
  text-decoration: none;
}

.blog-content a:hover {
  text-decoration: underline;
}