/* ==================== BASE STYLES ====================
 * Inspired by SuperMinimalCSS
 * Core typography and design system for ashish.is
 */

/* ==================== CSS VARIABLES ==================== */
:root {
    /* Colors */
    --color-bg: #0a0a0a;
    --color-text: #e8e8e8;
    --color-text-dim: #bfbfbf;
    --color-accent: #9370DB;
    --color-accent-hover: #754cc8;
    --color-border: rgba(255, 255, 255, 0.1);
    --color-overlay: rgba(25, 25, 25, 0.95);
    
    /* Typography */
    --font-main: 'Lora', serif;
    --font-italic: 'Georgia', 'Lora', serif;
    --font-mono: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
    --font-size-root: clamp(95%, 80% + 0.25vi, 150%);
    --font-weight-regular: 400;
    --font-weight-semibold: 700;
    --font-weight-bold: 900;
    --line-height: 1.7;
    --letter-spacing: 0;
    
    /* Spacing - fluid and responsive */
    --gutter: clamp(1ch, 2.5vmax, 3ch);
    --stack: clamp(1.25ex, 2.5vmax, 1.75ex);
    --space-xs: clamp(0.5rem, 1vh, 0.75rem);
    --space-s: clamp(0.75rem, 1.5vh, 1rem);
    --space-m: clamp(1rem, 2vh, 1.5rem);
    --space-l: clamp(1.5rem, 3vh, 2.5rem);
    --space-xl: clamp(2rem, 4vh, 3.5rem);
    --space-2xl: clamp(3rem, 6vh, 5rem);
    
    /* Typography Scale */
    --text-xs: clamp(0.85rem, 1.5vh, 0.95rem);
    --text-sm: clamp(0.95rem, 1.8vh, 1.05rem);
    --text-base: clamp(1rem, 2vh, 1.125rem);
    --text-lg: clamp(1.125rem, 2.25vh, 1.35rem);
    --text-xl: clamp(1.25rem, 2.5vh, 1.5rem);
    --text-2xl: clamp(1.5rem, 3vh, 2rem);
    --text-3xl: clamp(2rem, 4vh, 3rem);
    --text-4xl: clamp(2.5rem, 5vh, 3.5rem);
    
    /* Layout */
    --max-width-content: 1200px;
    --max-width-text: 70ch;
    --max-width-narrow: 60ch;
    
    /* Borders & Radius */
    --border-width: 1px;
    --border-style: solid;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ==================== RESET ==================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    font-size: var(--font-size-root);
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-main);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ==================== TYPOGRAPHY ==================== */

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
    margin-block-start: calc(var(--stack) * 1.75);
    margin-block-end: 0;
}

h1 {
    font-size: var(--text-4xl);
}

h2 {
    font-size: var(--text-3xl);
}

h3 {
    font-size: var(--text-2xl);
}

h4 {
    font-size: var(--text-xl);
}

h5 {
    font-size: var(--text-lg);
}

h6 {
    font-size: var(--text-base);
}

/* Reset first-child margins */
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin-block-start: 0;
}

/* Tighter spacing after headings */
h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + * {
    margin-block-start: calc(var(--stack) / 1.5);
}

/* Paragraphs and inline elements */
p {
    margin-block-start: var(--stack);
    margin-block-end: 0;
    max-width: var(--max-width-text);
}

p:first-child {
    margin-block-start: 0;
}

strong, b {
    font-weight: var(--font-weight-semibold);
}

em, i, cite {
    font-family: var(--font-italic);
    font-style: italic;
    font-weight: var(--font-weight-regular);
}

small {
    font-size: 0.8em;
}

big {
    font-size: 1.2em;
}

sup {
    vertical-align: super;
    font-size: 0.75em;
}

sub {
    vertical-align: sub;
    font-size: 0.75em;
}

/* Abbreviations */
abbr {
    font-family: var(--font-mono);
    font-size: 0.8em;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: var(--border-width);
    text-underline-offset: calc(var(--border-width) * 2);
    cursor: help;
}

/* Quotes */
q {
    font-style: italic;
}

q::before {
    content: '"';
}

q::after {
    content: '"';
}

/* Links */
a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: var(--border-width);
    text-underline-offset: calc(var(--border-width) * 2);
    transition: color var(--transition-base), text-decoration-thickness var(--transition-fast);
}

a:hover {
    text-decoration-thickness: calc(var(--border-width) * 3);
}

a:focus-visible {
    outline: calc(var(--border-width) * 2) solid var(--color-accent);
    outline-offset: calc(var(--border-width) * 2);
    border-radius: var(--border-radius-sm);
}

/* Accent links (for body content) */
.link-accent,
article a,
.article-content a {
    color: var(--color-accent);
}

.link-accent:hover,
article a:hover,
.article-content a:hover {
    color: var(--color-accent-hover);
}

/* Lists */
ul, ol {
    margin-block-start: var(--stack);
    margin-block-end: 0;
    margin-inline: 0;
    padding-inline-start: 2ch;
}

ul:first-child, ol:first-child {
    margin-block-start: 0;
}

li {
    margin-block-end: 0;
}

li + li {
    margin-block-start: calc(var(--stack) / 5);
}

li > ul,
li > ol {
    margin-block-start: calc(var(--stack) / 5);
    margin-inline-start: 2.25ch;
}

/* Blockquotes */
blockquote {
    position: relative;
    margin-block-start: var(--stack);
    margin-block-end: 0;
    margin-inline: 0;
    padding-inline-start: var(--space-l);
    border-inline-start: 3px solid var(--color-accent);
    font-family: var(--font-italic);
    font-style: italic;
    font-size: clamp(1.25rem, 1rem + 1dvi, 2rem);
    letter-spacing: 0;
    color: var(--color-text-dim);
}

blockquote:first-child {
    margin-block-start: 0;
}

blockquote > * {
    margin-block-start: calc(var(--stack) / 4);
}

blockquote > *:first-child {
    margin-block-start: 0;
}

blockquote p {
    text-wrap: pretty;
}

blockquote q::before {
    position: absolute;
    margin-inline-start: -1ex;
}

blockquote q q::before {
    position: static;
    margin-inline-start: unset;
}

blockquote footer,
blockquote cite {
    display: block;
    font-size: 0.8em;
    margin-block-start: calc(var(--stack) / 2);
}

/* Code */
code, kbd, pre {
    font-family: var(--font-mono);
    font-size: 0.8em;
}

code {
    padding-block: calc(var(--stack) / 6);
    padding-inline: calc(var(--gutter) / 3);
    color: var(--color-bg);
    background-color: var(--color-text);
    border-radius: var(--border-radius-sm);
}

pre {
    margin-block-start: var(--stack);
    margin-block-end: 0;
    margin-inline: 0;
    padding-block: var(--space-m);
    padding-inline: var(--space-m);
    background-color: var(--color-overlay);
    border-radius: var(--border-radius-md);
    overflow-x: auto;
    line-height: 1.5;
    white-space: pre-wrap;
    word-spacing: normal;
    word-break: normal;
    word-wrap: break-word;
}

pre:first-child {
    margin-block-start: 0;
}

pre code {
    display: block;
    padding: 0;
    color: var(--color-text);
    background-color: transparent;
    border-radius: 0;
    font-size: 1em;
}

kbd {
    padding-block: calc(var(--stack) / 6);
    padding-inline: calc(var(--gutter) / 6);
    background-color: var(--color-overlay);
    border: var(--border-width) solid var(--color-border);
    border-radius: 0.3em;
    font-weight: var(--font-weight-semibold);
    font-size: 0.8em;
}

/* Description Lists */
dl {
    display: grid;
    grid-template-columns: auto minmax(75%, 1fr);
    gap: calc(var(--gutter) / 2);
    align-items: baseline;
    margin-block-start: var(--stack);
    margin-block-end: 0;
    margin-inline: 0;
}

dl:first-child {
    margin-block-start: 0;
}

dt {
    font-family: var(--font-mono);
    font-size: 0.8em;
    font-weight: var(--font-weight-semibold);
    border-block-end: var(--border-width) dotted var(--color-border);
}

dd {
    margin-inline-start: 0;
    padding-block: calc(var(--stack) / 6);
    padding-inline: calc(var(--gutter) / 3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background-color: var(--color-overlay);
}

/* Tables */
table {
    width: 100%;
    margin-block-start: var(--stack);
    margin-block-end: 0;
    margin-inline: auto;
    border-collapse: separate;
    border-spacing: 2px; /* Increased to make purple lines more visible */
    background-color: var(--color-accent); /* Purple shows as borders */
    border-radius: var(--border-radius-md);
    font-family: var(--font-mono);
    font-size: 0.8em;
}

table:first-child {
    margin-block-start: 0;
}

caption {
    caption-side: bottom;
    padding-block: calc(var(--stack) / 2);
    font-family: var(--font-mono);
    font-size: 0.8em;
    text-align: center;
    color: var(--color-text-dim);
}

thead {
    background-color: var(--color-overlay);
}

thead tr:last-child th {
    border-bottom: 2px solid var(--color-accent); 
}

th {
    padding-block: calc(var(--stack) / 6);
    padding-inline: calc(var(--gutter) / 3);
    background-color: var(--color-bg);
    font-weight: var(--font-weight-semibold);
    text-align: start;
    vertical-align: baseline;
}

td {
    padding-block: calc(var(--stack) / 6);
    padding-inline: calc(var(--gutter) / 3);
    background-color: var(--color-bg);
    vertical-align: baseline;
}

tr > *:first-child {
    white-space: nowrap;
}

/* Horizontal Rule */
hr {
    block-size: 0;
    border: 0;
    border-block-start: var(--border-width) var(--border-style) var(--color-border);
    margin-block-start: calc(var(--stack) * 3);
    margin-block-end: calc(var(--stack) * 3);
}

hr + * {
    margin-block-start: 0;
}

/* Images & Figures */
img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-md);
}

figure {
    margin-block-start: var(--stack);
    margin-block-end: 0;
    margin-inline: 0;
    overflow-x: auto;
}

figure:first-child {
    margin-block-start: 0;
}

figure > img {
    margin-inline: auto;
}

figcaption {
    padding-block: calc(var(--stack) / 2);
    font-family: var(--font-mono);
    font-size: 0.8em;
    color: var(--color-text-dim);
    text-align: center;
}

/* Details & Summary */
details {
    margin-block-start: var(--stack);
    margin-block-end: 0;
}

details:first-child {
    margin-block-start: 0;
}

summary {
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
}

summary:hover > * {
    text-decoration: underline;
    text-underline-offset: calc(var(--border-width) * 2);
}

details[open] summary + * {
    margin-block-start: calc(var(--stack) / 4);
}

/* ==================== UTILITY CLASSES ==================== */

/* Text sizes */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }

/* Text colors */
.text-dim { color: var(--color-text-dim); }
.text-accent { color: var(--color-accent); }

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Font weights */
.font-regular { font-weight: var(--font-weight-regular); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Text transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.small-caps { font-variant: small-caps; }

/* Spacing utilities */
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-s { margin-bottom: var(--space-s); }
.mb-m { margin-bottom: var(--space-m); }
.mb-l { margin-bottom: var(--space-l); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-s { margin-top: var(--space-s); }
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

/* Max width utilities */
.max-w-content { max-width: var(--max-width-content); }
.max-w-text { max-width: var(--max-width-text); }
.max-w-narrow { max-width: var(--max-width-narrow); }

/* Layout utilities */
.container {
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: 0 var(--space-m);
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-xs { gap: var(--space-xs); }
.gap-s { gap: var(--space-s); }
.gap-m { gap: var(--space-m); }
.gap-l { gap: var(--space-l); }

/* ==================== COMMON COMPONENTS ==================== */

/* Buttons */
.btn {
    display: inline-block;
    padding-block: calc(var(--stack) / 3);
    padding-inline: var(--gutter);
    background-color: var(--color-accent);
    color: var(--color-bg);
    border: var(--border-width) solid transparent;
    border-radius: var(--border-radius-md);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-base);
}

.btn:hover {
    background-color: var(--color-accent-hover);
    text-decoration: none;
}

.btn:focus-visible {
    outline: calc(var(--border-width) * 2) solid var(--color-accent);
    outline-offset: calc(var(--border-width) * 2);
}

/* Cards */
.card {
    background-color: var(--color-overlay);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-l);
}

/* Meta text (dates, categories, etc.) */
.meta {
    font-size: 0.85em;
    color: var(--color-text-dim);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 767px) {
    :root {
        --line-height: 1.6;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}