/* ============================================
   Turing Typewriter - Typographic System
   ============================================ */

/* === Font Imports === */
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');

/* === CSS Variables === */
:root {

    --paper-gradient: repeating-linear-gradient(0deg,
            transparent,
            transparent 31px,
            oklch(95% 0 0) 31px,
            oklch(95% 0 0) 32px);

    /* Spacing Scale (based on 4px) */
    --space-1: 0.25rem;
    /* 4px */
    --space-2: 0.5rem;
    /* 8px */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.5rem;
    /* 24px */
    --space-6: 2rem;
    /* 32px */
    --space-8: 3rem;
    /* 48px */
    --space-10: 4rem;
    /* 64px */
    --space-12: 6rem;
    /* 96px */

    /* Typography */
    --font-mono: 'Inconsolata', 'Courier New', Courier, monospace;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Arial', sans-serif;
    --font-ui: var(--font-sans);
    /* Explicit UI font for buttons, labels, nav */

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Responsive Type Scale using clamp() */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
    --text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem);
    --text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
    --text-5xl: clamp(3rem, 2.55rem + 2.25vw, 3.75rem);

    /* === Grayscale Palette (Global) === */
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #a3a3a3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #171717;
    --gray-950: #0a0a0a;
}

/* === Light Theme (Default) === */
:root,
[data-theme="light"] {
    --bg-primary: #fafafa;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #e5e5e5;

    --text-primary: #0a0a0a;
    --text-secondary: #404040;
    --text-tertiary: #525252;
    --text-muted: #737373;
    --text-subtle: #a3a3a3;

    --border-primary: #d4d4d4;
    --border-secondary: #e5e5e5;

    --color-error: #dc2626;
    --color-success: #16a34a;
}

/* === Dark Theme === */
[data-theme="dark"] {
    --bg-primary: #0a0a0a;
    --bg-secondary: #171717;
    --bg-tertiary: #262626;

    --text-primary: #fafafa;
    --text-secondary: #d4d4d4;
    --text-tertiary: #a3a3a3;
    --text-muted: #737373;
    --text-subtle: #525252;

    --border-primary: #404040;
    --border-secondary: #262626;

    --color-error: #ef4444;
    --color-success: #22c55e;

    --paper-gradient: repeating-linear-gradient(0deg,
            transparent,
            transparent 31px,
            oklch(30% 0 0) 31px,
            oklch(10% 0 0) 32px)
}

/* === Base Styles === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* === Typography Elements === */

/* Headings - No default margins, use in context */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: "Darker Grotesque", sans-serif;
    font-optical-sizing: auto;
    font-weight: bold;
    line-height: var(--line-height-tight);
    color: var(--gray-700);
    /* Inherit from parent theme */
    letter-spacing: -0.025em;
}

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

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

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

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

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

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

/* Paragraphs */
p {
    margin: 0;
    line-height: var(--line-height-relaxed);
    color: var(--text-primary);
}

/* Links */
a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.2s ease;
}

a:hover {
    opacity: 0.7;
}

/* Lists */
ul,
ol {
    margin: 0;
    padding-left: var(--space-6);
}

li {
    line-height: var(--line-height-relaxed);
}

/* Code & Pre */
code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background-color: var(--bg-secondary);
    padding: var(--space-1) var(--space-2);
    border-radius: 2px;
}

pre {
    font-family: var(--font-mono);
    background-color: var(--bg-secondary);
    padding: var(--space-4);
    overflow-x: auto;
    border-left: 8px solid var(--border-primary);
}

pre code {
    background-color: transparent;
    padding: 0;
}

/* Blockquotes */
blockquote {
    margin: 0;
    padding-left: var(--space-5);
    border-left: 8px solid var(--border-primary);
    color: var(--text-secondary);
    font-style: italic;
}

/* Horizontal Rule */
hr {
    border: none;
    border-top: 1px solid #ff5d5d;
    margin: var(--space-6) 0;
}

/* === Document Context - Semantic Defaults === */
/* Automatic prose styling for semantic containers */

article,
main,
.prose {
    max-width: 75ch;
}

article>p {
    max-width: 75ch;
    margin: auto;
}

/* Article header structure: title, subtitle, metadata */
article>header h1 {
    margin: 0;
    font-size: var(--text-4xl);
    color: var(--text-secondary);
}

article>header h2 {
    margin: 0;
    font-weight: normal;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
    font-size: var(--text-2xl);
    text-transform: uppercase;
    font-variant: petite-caps;
    font-weight: 400;
}

article>header>*:not(h1):not(h2):not(h3) {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    margin: 0;
}

article>header {
    border-bottom: 2px solid var(--text-secondary);
}


article>*+*,
main>*+*,
.prose>*+* {
    margin-top: var(--space-4);
}

article h1,
main h1,
.prose h1 {
    margin-top: var(--space-10);
    margin-bottom: var(--space-5);
}

article h1:first-child,
main h1:first-child,
.prose h1:first-child {
    margin-top: 0;
}

article h2,
main h2,
.prose h2 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
}

article h3,
main h3,
.prose h3 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

article h4,
article h5,
article h6,
main h4,
main h5,
main h6,
.prose h4,
.prose h5,
.prose h6 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-3);
}

article p,
main p,
.prose p {
    margin-bottom: var(--space-4);
}

article ul,
article ol,
main ul,
main ol,
.prose ul,
.prose ol {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

article li+li,
main li+li,
.prose li+li {
    margin-top: var(--space-2);
}

article blockquote,
main blockquote,
.prose blockquote {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
}

article pre,
main pre,
.prose pre {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
}

/* === Color Utilities === */

/* Text Colors */
.text-primary {
    color: var(--text-primary);
}

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

.text-tertiary {
    color: var(--text-tertiary);
}

.text-muted {
    color: var(--text-muted);
}

.text-subtle {
    color: var(--text-subtle);
}

.text-error {
    color: var(--color-error);
}

.text-success {
    color: var(--color-success);
}

/* Background Colors */
.bg-primary {
    background-color: var(--bg-primary);
}

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

.bg-tertiary {
    background-color: var(--bg-tertiary);
}

/* === Theme Toggle Support === */
.theme-toggle {
    cursor: pointer;
    padding: var(--space-2) var(--space-4);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
}

.theme-toggle:hover {
    background-color: var(--bg-tertiary);
}

/* === Scoped Theme Sections === */
/* CRITICAL: Each section must explicitly set bg and color to pick up scoped variables */
.section {
    padding: var(--space-8) var(--space-4);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* === Selection === */
::selection {
    background-color: var(--text-primary);
    color: var(--bg-primary);
}

.paper-gradient {
    background: var(--paper-gradient);
}

table {
    border-collapse: collapse;
    color: var(--gray-700);
}

th {
    text-align: left;
    border-bottom: 3px solid var(--bg-tertiary);
    border-bottom-style: double;
    padding: 1ch;
    min-width: 10ch;
}

td {
    text-align: left;
    padding: 1ch;
    font-weight: 600;
}


.truth-table {
    color: var(--gray-300);
}

.truth-table-container {
    background: var(--gray-700);
    display: flex;
    justify-content: center;
    padding: 1rem;
    box-shadow: 4px 4px 0 #595959;
    border-top: 2px outset black;
}