/*
 * Ink & Paper Theme System
 * An editorial aesthetic inspired by luxury stationery and vintage ink
 */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* Light theme - Warm paper tones */
    --color-bg-primary: #faf8f5;
    --color-bg-secondary: #f3f0eb;
    --color-bg-tertiary: #ebe7e0;
    --color-bg-hover: #e8e4dc;
    --color-bg-elevated: #ffffff;

    --color-text-primary: #2c2825;
    --color-text-secondary: #5c5652;
    --color-text-tertiary: #8a8380;
    --color-text-inverse: #faf8f5;

    --color-border: #ddd8d0;
    --color-border-light: #e8e4dc;
    --color-border-subtle: #f0ece6;

    /* Accent - Deep burgundy/wine */
    --color-accent: #8b3a3a;
    --color-accent-hover: #a04545;
    --color-accent-light: rgba(139, 58, 58, 0.08);
    --color-accent-muted: rgba(139, 58, 58, 0.15);

    /* Semantic colors */
    --color-success: #3d7a5a;
    --color-warning: #b5762a;
    --color-danger: #a83232;
    --color-info: #4a6b8a;

    /* Code blocks */
    --color-code-bg: #f0ece6;
    --color-code-text: #4a4540;
    --color-code-border: #e0dbd3;

    /* Shadows - soft and warm */
    --shadow-xs: 0 1px 2px rgba(44, 40, 37, 0.04);
    --shadow-sm: 0 2px 4px rgba(44, 40, 37, 0.06);
    --shadow-md: 0 4px 12px rgba(44, 40, 37, 0.08);
    --shadow-lg: 0 8px 24px rgba(44, 40, 37, 0.12);
    --shadow-xl: 0 16px 48px rgba(44, 40, 37, 0.16);
    --shadow-inner: inset 0 1px 2px rgba(44, 40, 37, 0.06);
    --shadow-glow: 0 0 0 3px rgba(139, 58, 58, 0.15);

    /* Border radius */
    --radius-xs: 3px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Typography */
    --font-display: 'Crimson Pro', Georgia, 'Times New Roman', serif;
    --font-body: 'Source Serif 4', Georgia, serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, monospace;

    /* Font sizes - refined scale */
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;

    /* Transitions */
    --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --sidebar-width: 300px;
    --header-height: 60px;
    --content-max-width: 720px;

    /* Texture */
    --texture-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Dark theme - Rich ink tones */
[data-theme="dark"] {
    --color-bg-primary: #1a1816;
    --color-bg-secondary: #232120;
    --color-bg-tertiary: #2d2a28;
    --color-bg-hover: #363330;
    --color-bg-elevated: #2d2a28;

    --color-text-primary: #e8e4de;
    --color-text-secondary: #a8a29e;
    --color-text-tertiary: #787270;
    --color-text-inverse: #1a1816;

    --color-border: #3d3935;
    --color-border-light: #4a4540;
    --color-border-subtle: #2d2a28;

    /* Accent - Warm rose gold */
    --color-accent: #c77d6e;
    --color-accent-hover: #d99485;
    --color-accent-light: rgba(199, 125, 110, 0.12);
    --color-accent-muted: rgba(199, 125, 110, 0.2);

    /* Semantic colors - muted for dark mode */
    --color-success: #6aaa7c;
    --color-warning: #d4a95a;
    --color-danger: #cf6b6b;
    --color-info: #7a9dbf;

    /* Code blocks */
    --color-code-bg: #252220;
    --color-code-text: #d4cfc8;
    --color-code-border: #3d3935;

    /* Shadows - deeper for dark mode */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 0 0 3px rgba(199, 125, 110, 0.25);
}

/* System preference detection */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg-primary: #1a1816;
        --color-bg-secondary: #232120;
        --color-bg-tertiary: #2d2a28;
        --color-bg-hover: #363330;
        --color-bg-elevated: #2d2a28;

        --color-text-primary: #e8e4de;
        --color-text-secondary: #a8a29e;
        --color-text-tertiary: #787270;
        --color-text-inverse: #1a1816;

        --color-border: #3d3935;
        --color-border-light: #4a4540;
        --color-border-subtle: #2d2a28;

        --color-accent: #c77d6e;
        --color-accent-hover: #d99485;
        --color-accent-light: rgba(199, 125, 110, 0.12);
        --color-accent-muted: rgba(199, 125, 110, 0.2);

        --color-success: #6aaa7c;
        --color-warning: #d4a95a;
        --color-danger: #cf6b6b;
        --color-info: #7a9dbf;

        --color-code-bg: #252220;
        --color-code-text: #d4cfc8;
        --color-code-border: #3d3935;

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
        --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
        --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.2);
        --shadow-glow: 0 0 0 3px rgba(199, 125, 110, 0.25);
    }
}

/* Theme transition */
body.theme-transitioning,
body.theme-transitioning * {
    transition:
        background-color var(--transition-slow),
        color var(--transition-slow),
        border-color var(--transition-slow),
        box-shadow var(--transition-slow) !important;
}