/* ══════════════════════════════════════════════════════
   Internet Notepad — Design Tokens (Linen)
   Warm paper notebook aesthetic • OKLCH colors
   ══════════════════════════════════════════════════════ */

:root {
    /* ── Colors (OKLCH, perceptual uniformity) ── */
    --paper:         oklch(0.97 0.012 95);
    --paper-card:    oklch(0.98 0.007 95);
    --paper-hover:   oklch(0.95 0.01 95);
    --paper-active:  oklch(0.935 0.015 95);

    --ink:           oklch(0.28 0.03 85);
    --ink-secondary:  oklch(0.47 0.02 95);
    --ink-muted:      oklch(0.55 0.015 95);
    --ink-placeholder: oklch(0.58 0.012 95);

    --line:    oklch(0.90 0.018 95);
    --line-light: oklch(0.94 0.01 95);

    --accent:        oklch(0.45 0.09 250);
    --accent-hover:  oklch(0.38 0.09 250);
    --accent-bg:     oklch(0.94 0.03 250);
    --accent-text:   oklch(0.99 0 0);

    --gold:      oklch(0.56 0.12 85);
    --gold-hover: oklch(0.50 0.12 85);
    --gold-bg:   oklch(0.95 0.06 85);

    --danger:       oklch(0.52 0.17 25);
    --danger-hover: oklch(0.45 0.17 25);
    --danger-bg:    oklch(0.95 0.03 25);

    --success:       oklch(0.52 0.1 145);
    --success-bg:    oklch(0.94 0.04 145);

    /* ── Legacy aliases (backward compatibility) ── */
    --color-bg: var(--paper);
    --color-surface: var(--paper-card);
    --color-surface-hover: var(--paper-hover);
    --color-surface-active: var(--paper-active);
    --color-text-primary: var(--ink);
    --color-text-secondary: var(--ink-secondary);
    --color-text-muted: var(--ink-muted);
    --color-border: var(--line);
    --color-border-light: var(--line-light);
    --color-accent: var(--accent);
    --color-accent-hover: var(--accent-hover);
    --color-accent-light: var(--accent-bg);
    --color-accent-subtle: var(--accent-bg);
    --color-danger: var(--danger);
    --color-danger-hover: var(--danger-hover);
    --color-danger-light: var(--danger-bg);
    --color-success: var(--success);
    --color-success-light: var(--success-bg);

    /* ── Typography ─────────────────────────── */
    --font-display: 'Spectral', 'Times New Roman', serif;
    --font-sans: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --text-xs: 0.6875rem;   /* 11px */
    --text-sm: 0.8125rem;   /* 13px */
    --text-base: 0.9375rem; /* 15px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.375rem;    /* 22px */
    --text-2xl: 1.75rem;    /* 28px */
    --text-3xl: 2.25rem;    /* 36px */

    --leading-tight: 1.25;
    --leading: 1.5;
    --leading-relaxed: 1.75;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    /* Legacy aliases */
    --font-weight-normal: var(--weight-normal);
    --font-weight-medium: var(--weight-medium);
    --font-weight-semibold: var(--weight-semibold);
    --font-weight-bold: var(--weight-bold);

    /* ── Spacing (4pt scale) ────────────────── */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ── Geometry ───────────────────────────── */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    --border-width: 1px;

    /* ── Shadows (warm-tinted) ──────────────── */
    --shadow-xs: 0 1px 2px oklch(0.3 0.02 95 / 0.06);
    --shadow-sm: 0 1px 3px oklch(0.3 0.02 95 / 0.08), 0 1px 2px oklch(0.3 0.02 95 / 0.06);
    --shadow:   0 1px 3px oklch(0.3 0.02 95 / 0.1), 0 1px 2px oklch(0.3 0.02 95 / 0.06);
    --shadow-md: 0 4px 12px oklch(0.3 0.02 95 / 0.1), 0 2px 4px oklch(0.3 0.02 95 / 0.06);
    --shadow-lg: 0 8px 24px oklch(0.3 0.02 95 / 0.12), 0 4px 8px oklch(0.3 0.02 95 / 0.06);

    /* ── Z-index ────────────────────────────── */
    --z-sidebar: 10;
    --z-header: 20;
    --z-overlay: 30;
    --z-modal: 40;
    --z-toast: 50;

    /* ── Transitions ────────────────────────── */
    --transition-fast: 120ms ease;
    --transition: 200ms ease;
    --transition-slow: 350ms ease;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Layout ─────────────────────────────── */
    --header-height: 52px;
    --sidebar-width: 300px;
    --content-max-width: 780px;
    --bottom-nav-height: 56px;
    --tab-min-height: 36px;
    --sidebar-width-tablet: 280px;
    --sidebar-width-mobile: 100%;
}

/* ── Dark Theme (warm evening, lamplight) ───────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --paper:       oklch(0.17 0.01 90);
        --paper-card:  oklch(0.21 0.008 90);
        --paper-hover: oklch(0.24 0.01 90);
        --paper-active: oklch(0.28 0.012 90);

        --ink:          oklch(0.92 0.02 95);
        --ink-secondary: oklch(0.65 0.015 95);
        --ink-muted:     oklch(0.59 0.012 95);
        --ink-placeholder: oklch(0.59 0.01 95);

        --line:       oklch(0.28 0.012 90);
        --line-light: oklch(0.22 0.008 90);

        --accent:       oklch(0.72 0.12 80);
        --accent-hover: oklch(0.78 0.12 80);
        --accent-bg:    oklch(0.22 0.04 80);
        --accent-text:  oklch(0.15 0.01 90);

        --gold:       oklch(0.70 0.11 85);
        --gold-hover: oklch(0.76 0.11 85);
        --gold-bg:    oklch(0.22 0.04 85);

        --danger:       oklch(0.68 0.18 25);
        --danger-hover: oklch(0.74 0.18 25);
        --danger-bg:    oklch(0.22 0.03 25);

        --success:       oklch(0.62 0.1 145);
        --success-bg:    oklch(0.20 0.03 145);

        --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.2);
        --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.25), 0 1px 2px oklch(0 0 0 / 0.15);
        --shadow:   0 1px 3px oklch(0 0 0 / 0.25), 0 1px 2px oklch(0 0 0 / 0.15);
        --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3), 0 2px 4px oklch(0 0 0 / 0.2);
        --shadow-lg: 0 8px 24px oklch(0 0 0 / 0.4), 0 4px 8px oklch(0 0 0 / 0.25);

        /* Legacy aliases in dark */
        --color-bg: var(--paper);
        --color-surface: var(--paper-card);
        --color-surface-hover: var(--paper-hover);
        --color-surface-active: var(--paper-active);
        --color-text-primary: var(--ink);
        --color-text-secondary: var(--ink-secondary);
        --color-text-muted: var(--ink-muted);
        --color-border: var(--line);
        --color-border-light: var(--line-light);
        --color-accent: var(--accent);
        --color-accent-hover: var(--accent-hover);
        --color-accent-light: var(--accent-bg);
        --color-accent-subtle: var(--accent-bg);
        --color-danger: var(--danger);
        --color-danger-hover: var(--danger-hover);
        --color-danger-light: var(--danger-bg);
        --color-success: var(--success);
        --color-success-light: var(--success-bg);
    }

    /* Force light when manually set */
    html[data-theme="light"] {
        --paper:       oklch(0.97 0.012 95);
        --paper-card:  oklch(0.98 0.007 95);
        --paper-hover: oklch(0.95 0.01 95);
        --paper-active: oklch(0.935 0.015 95);

        --ink:          oklch(0.28 0.03 85);
        --ink-secondary: oklch(0.47 0.02 95);
        --ink-muted:     oklch(0.55 0.015 95);
        --ink-placeholder: oklch(0.58 0.012 95);

        --line:    oklch(0.90 0.018 95);
        --line-light: oklch(0.94 0.01 95);

        --accent:       oklch(0.45 0.09 250);
        --accent-hover: oklch(0.38 0.09 250);
        --accent-bg:    oklch(0.94 0.03 250);
        --accent-text:  oklch(0.99 0 0);

        --gold:      oklch(0.56 0.12 85);
        --gold-hover: oklch(0.50 0.12 85);
        --gold-bg:   oklch(0.95 0.06 85);

        --danger:       oklch(0.52 0.17 25);
        --danger-hover: oklch(0.45 0.17 25);
        --danger-bg:    oklch(0.95 0.03 25);

        --success:       oklch(0.52 0.1 145);
        --success-bg:    oklch(0.94 0.04 145);

        --shadow-xs: 0 1px 2px oklch(0.3 0.02 95 / 0.06);
        --shadow-sm: 0 1px 3px oklch(0.3 0.02 95 / 0.08), 0 1px 2px oklch(0.3 0.02 95 / 0.06);
        --shadow:   0 1px 3px oklch(0.3 0.02 95 / 0.1), 0 1px 2px oklch(0.3 0.02 95 / 0.06);
        --shadow-md: 0 4px 12px oklch(0.3 0.02 95 / 0.1), 0 2px 4px oklch(0.3 0.02 95 / 0.06);
        --shadow-lg: 0 8px 24px oklch(0.3 0.02 95 / 0.12), 0 4px 8px oklch(0.3 0.02 95 / 0.06);

        --color-bg: var(--paper);
        --color-surface: var(--paper-card);
        --color-surface-hover: var(--paper-hover);
        --color-surface-active: var(--paper-active);
        --color-text-primary: var(--ink);
        --color-text-secondary: var(--ink-secondary);
        --color-text-muted: var(--ink-muted);
        --color-border: var(--line);
        --color-border-light: var(--line-light);
        --color-accent: var(--accent);
        --color-accent-hover: var(--accent-hover);
        --color-accent-light: var(--accent-bg);
        --color-accent-subtle: var(--accent-bg);
        --color-danger: var(--danger);
        --color-danger-hover: var(--danger-hover);
        --color-danger-light: var(--danger-bg);
        --color-success: var(--success);
        --color-success-light: var(--success-bg);
    }
}

/* Dark via manual override */
html[data-theme="dark"] {
    --paper:       oklch(0.17 0.01 90);
    --paper-card:  oklch(0.21 0.008 90);
    --paper-hover: oklch(0.24 0.01 90);
    --paper-active: oklch(0.28 0.012 90);

    --ink:          oklch(0.92 0.02 95);
    --ink-secondary: oklch(0.65 0.015 95);
    --ink-muted:     oklch(0.59 0.012 95);
    --ink-placeholder: oklch(0.59 0.01 95);

    --line:       oklch(0.28 0.012 90);
    --line-light: oklch(0.22 0.008 90);

    --accent:       oklch(0.72 0.12 80);
    --accent-hover: oklch(0.78 0.12 80);
    --accent-bg:    oklch(0.22 0.04 80);
    --accent-text:  oklch(0.15 0.01 90);

    --gold:       oklch(0.70 0.11 85);
    --gold-hover: oklch(0.76 0.11 85);
    --gold-bg:    oklch(0.22 0.04 85);

    --danger:       oklch(0.68 0.18 25);
    --danger-hover: oklch(0.74 0.18 25);
    --danger-bg:    oklch(0.22 0.03 25);

    --success:       oklch(0.62 0.1 145);
    --success-bg:    oklch(0.20 0.03 145);

    --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.2);
    --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.25), 0 1px 2px oklch(0 0 0 / 0.15);
    --shadow:   0 1px 3px oklch(0 0 0 / 0.25), 0 1px 2px oklch(0 0 0 / 0.15);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3), 0 2px 4px oklch(0 0 0 / 0.2);
    --shadow-lg: 0 8px 24px oklch(0 0 0 / 0.4), 0 4px 8px oklch(0 0 0 / 0.25);

    --color-bg: var(--paper);
    --color-surface: var(--paper-card);
    --color-surface-hover: var(--paper-hover);
    --color-surface-active: var(--paper-active);
    --color-text-primary: var(--ink);
    --color-text-secondary: var(--ink-secondary);
    --color-text-muted: var(--ink-muted);
    --color-border: var(--line);
    --color-border-light: var(--line-light);
    --color-accent: var(--accent);
    --color-accent-hover: var(--accent-hover);
    --color-accent-light: var(--accent-bg);
    --color-accent-subtle: var(--accent-bg);
    --color-danger: var(--danger);
    --color-danger-hover: var(--danger-hover);
    --color-danger-light: var(--danger-bg);
    --color-success: var(--success);
    --color-success-light: var(--success-bg);
}

/* ── Reduced Motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    html {
        scroll-behavior: auto;
    }
    .skeleton {
        animation: none;
        background: var(--color-surface-hover);
    }
}