@import url("https://fonts.googleapis.com/css2?family=Sniglet&display=swap");

/* Grateful Journal – enhanced green palette */
*,
*::before,
*::after {
    box-sizing: border-box;
    user-select: none;
}

input, textarea {
    user-select: text;
}

:root {
    font-family: "Sniglet", system-ui, sans-serif;
    line-height: 1.5;
    font-weight: 400;
    /* Fixed 16px – we're always rendering at phone scale */
    font-size: 16px;

    --touch-min: 44px;

    --color-primary: #22c55e;
    --color-primary-hover: #16a34a;
    --color-bg-soft: #eef6ee;
    --card-bg-opacity: 0.7;
    --color-surface: rgb(255 255 255 / var(--card-bg-opacity));
    --color-accent-light: #dcfce7;
    --color-text: #1a1a1a;
    --color-text-muted: #4b505a;
    --color-border: #d4e8d4;

    color: var(--color-text);
    background-color: var(--color-bg-soft);
    caret-color: #22c55e;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: inherit;
}
a:hover {
    color: var(--color-primary-hover);
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    height: 100%;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--color-bg-soft);
}

h1 {
    font-size: 1.75rem;
    line-height: 1.2;
}

button {
    font-family: inherit;
    cursor: pointer;
}
button:focus,
button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ── Dark theme root overrides ────────────────────────── */
[data-theme="dark"] {
    --color-primary: #4ade80;
    --color-primary-hover: #22c55e;
    --color-bg-soft: #0f0f0f;
    --color-surface: rgb(26 26 26 / var(--card-bg-opacity));
    --color-accent-light: rgba(74, 222, 128, 0.12);
    --color-text: #e8f5e8;
    --color-text-muted: #a2ada2;
    --color-border: rgba(74, 222, 128, 0.12);

    color: var(--color-text);
    background-color: var(--color-bg-soft);
    caret-color: #4ade80;
}

[data-theme="dark"] body {
    background: #0a0a0a;
}

/* ── Liquid Glass theme root overrides ───────────────────── */
[data-theme="liquid-glass"] {
    --glass-bg: rgba(255, 255, 255, 0.18);
    --glass-blur: blur(28px) saturate(200%) brightness(1.05);
    --glass-border: 1px solid rgba(255, 255, 255, 0.55);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
    --color-primary: #16a34a;
    --color-primary-hover: #15803d;
    --color-bg-soft: transparent;
    --color-surface: var(--glass-bg);
    --color-accent-light: rgba(220, 252, 231, 0.4);
    --color-text: #0f172a;
    --color-text-muted: #334155;
    --color-border: rgba(255, 255, 255, 0.4);

    color: var(--color-text);
    background-color: transparent;
    caret-color: #16a34a;
}

/* Same bg as light theme when no custom image is set */
[data-theme="liquid-glass"] body:not(.gj-has-bg) {
    background: #eef6ee;
}
