/* ===================================================================
   tiny-rituals design system
   warm neutrals, serif display, lots of breathing room
   =================================================================== */

/* Sans is bundled (Inter); serif is the OS-native Georgia stack. */
@font-face {
    font-family: 'Inter';
    font-style: normal; font-weight: 400; font-display: swap;
    src: url('/fonts/inter-400.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal; font-weight: 500; font-display: swap;
    src: url('/fonts/inter-500.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal; font-weight: 600; font-display: swap;
    src: url('/fonts/inter-600.ttf') format('truetype');
}

:root {
    /* Palette — warm paper, espresso ink, single sage accent */
    --paper:      #f7f3ec;
    --paper-deep: #efe9df;
    --ink:        #2a2622;
    --ink-soft:   #5a544c;
    --ink-mute:   #8a8278;
    --rule:       #d9d2c4;
    --accent:     #6b8e6e;     /* sage */
    --accent-deep:#4d6e51;
    --warn:       #b97455;
}

body[data-theme="sepia"] {
    --paper:      #f0e6d2;
    --paper-deep: #e3d6b8;
    --ink:        #3a2d1f;
    --ink-soft:   #6b5a45;
    --ink-mute:   #97866c;
    --rule:       #cdbb98;
    --accent:     #a86b3a;
    --accent-deep:#7d4a22;
}

body[data-theme="midnight"] {
    --paper:      #14171c;
    --paper-deep: #1d2128;
    --ink:        #ece7da;
    --ink-soft:   #b9b3a5;
    --ink-mute:   #7e7969;
    --rule:       #2c3037;
    --accent:     #9ab39c;
    --accent-deep:#bcd1be;
    --warn:       #d39074;
}

body[data-theme="midnight"] .card,
body[data-theme="midnight"] .tile,
body[data-theme="midnight"] .crumb {
    background: var(--paper-deep);
}

:root {

    /* Typography scale */
    --serif:  Georgia, 'Iowan Old Style', 'Hoefler Text', 'Times New Roman', serif;
    --sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Rhythm */
    --r-1: 0.5rem;
    --r-2: 1rem;
    --r-3: 1.5rem;
    --r-4: 2.5rem;
    --r-5: 4rem;
    --r-6: 6rem;

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 180ms;
    --dur:      320ms;
    --dur-slow: 600ms;

    --shadow-card: 0 1px 0 rgba(42, 38, 34, 0.04),
                   0 12px 32px -16px rgba(42, 38, 34, 0.12);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;   /* kill WebView blue flash */
}

/* Don't let long-press select text on interactive surfaces, but DO allow it
   in actual content (entries, blockquotes, etc.). */
button, a, .tile, .chip, .drink, .mode, .tab,
input[type=range], .strip-day, .swatch, .year-cell,
.cal-cell, .progress-dot, .crumb, .theme-toggle, .mic, .file-pick {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

html, body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}

body { overflow-x: hidden; }

h1, h2, h3, .display {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--ink);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.25rem; }

.display-xl {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(2.6rem, 7vw, 5.2rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.eyebrow {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
}

p, label, input, textarea, button {
    font-family: inherit;
    color: var(--ink);
}

a {
    color: var(--accent-deep);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-fast) var(--ease);
}
a:hover { border-bottom-color: var(--accent-deep); }

button {
    cursor: pointer;
    border: none;
    background: none;
    font-size: 1rem;
}

/* ---- Shared layout ---- */

.shell {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--r-5) var(--r-3) var(--r-6);
}

.shell-wide {
    max-width: 980px;
    margin: 0 auto;
    padding: var(--r-5) var(--r-3) var(--r-6);
}

.crumb {
    position: fixed;
    top: var(--r-2);
    left: var(--r-2);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    color: var(--ink-soft);
    background: rgba(247, 243, 236, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid var(--rule);
    border-radius: 999px;
    transition: all var(--dur) var(--ease);
}
.crumb:hover { color: var(--ink); border-color: var(--ink-mute); }
.crumb::before { content: '←'; font-size: 0.9rem; }

/* ---- Inputs ---- */

.input, .textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule);
    padding: 0.7rem 0;
    font-size: 1.05rem;
    color: var(--ink);
    transition: border-color var(--dur-fast) var(--ease);
    font-family: inherit;
    outline: none;
    resize: none;
}
.input:focus, .textarea:focus {
    border-bottom-color: var(--ink);
}
.input::placeholder, .textarea::placeholder {
    color: var(--ink-mute);
    font-style: italic;
}

/* Big serif input variant */
.input-display {
    font-family: var(--serif);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 400;
    line-height: 1.3;
    background: transparent;
    border: none;
    width: 100%;
    color: var(--ink);
    outline: none;
    resize: none;
    padding: 0;
}
.input-display::placeholder {
    color: var(--ink-mute);
    font-style: italic;
    font-weight: 300;
}

/* ---- Buttons ---- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.6rem;
    background: var(--ink);
    color: var(--paper);
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: transform var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease),
                opacity var(--dur-fast);
}
.btn:hover { transform: translateY(-1px); background: var(--accent-deep); }
.btn:active { transform: translateY(1px); background: var(--accent-deep); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* Subtle press feedback for tiles / chips / cards on touch */
.tile:active { transform: translateY(-1px); background: var(--paper-deep); }
.chip:active, .mode:active, .tab:active, .drink:active {
    background: var(--paper-deep);
}
.mic:active, .file-pick:active, .crumb:active, .theme-toggle:active {
    background: var(--paper-deep);
}

.btn-ghost {
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--rule);
}
.btn-ghost:hover { background: var(--paper-deep); color: var(--ink); }

.btn-quiet {
    background: transparent;
    color: var(--ink-mute);
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}
.btn-quiet:hover { color: var(--ink); }

/* ---- Cards ---- */

.card {
    background: #fffdf8;
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: var(--r-3);
    box-shadow: var(--shadow-card);
}

.rule {
    height: 1px;
    background: var(--rule);
    margin: var(--r-4) 0;
    border: none;
}

/* ---- Motion utilities ---- */

@keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise var(--dur-slow) var(--ease-out) both; }
.rise-1 { animation-delay: 80ms; }
.rise-2 { animation-delay: 180ms; }
.rise-3 { animation-delay: 320ms; }

@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

/* ---- Toast ---- */

.toast {
    position: fixed;
    bottom: var(--r-3);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--ink);
    color: var(--paper);
    padding: 0.7rem 1.2rem;
    border-radius: 999px;
    font-size: 0.9rem;
    opacity: 0;
    pointer-events: none;
    transition: all var(--dur) var(--ease);
    z-index: 100;
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Service-worker update toast — sticky, with a tap-to-reload button. */
.sw-update-toast {
    position: fixed;
    bottom: var(--r-3);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--ink);
    color: var(--paper);
    padding: 0.5rem 0.5rem 0.5rem 1.1rem;
    border-radius: 999px;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    opacity: 0;
    z-index: 200;
    transition: all var(--dur) var(--ease);
    box-shadow: 0 8px 24px -8px rgba(42, 38, 34, 0.4);
}
.sw-update-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.sw-update-toast button {
    background: var(--accent);
    color: var(--paper);
    border: none;
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
}
.sw-update-toast button:hover { background: var(--accent-deep); }

/* ---- Theme toggle + mic button ---- */

.theme-toggle {
    position: fixed;
    top: var(--r-2);
    right: var(--r-2);
    z-index: 10;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(247, 243, 236, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid var(--rule);
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    font-family: var(--sans);
    transition: all var(--dur) var(--ease);
}
.theme-toggle > span {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1em;
    text-align: center;
    font-size: 1em;
    transform: translateY(-0.02em);
}
/* ◉ fisheye + ◐ half-circle render smaller than ○/● in most fonts —
   nudge them up so all four read the same visual diameter. */
.theme-toggle.glyph-lg > span { font-size: 1.28em; }
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-mute); transform: rotate(60deg); }

.mic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    margin-left: 0.4rem;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-soft);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    vertical-align: middle;
}
.mic:hover { border-color: var(--ink-mute); color: var(--ink); }
.mic .mic-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    transition: all var(--dur-fast);
}
.mic.rec { color: var(--warn); border-color: var(--warn); }
.mic.rec .mic-dot {
    animation: pulse-dot 1.2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(0.65); opacity: 0.5; }
}

/* ---- Utility ---- */
.muted { color: var(--ink-mute); }
.soft  { color: var(--ink-soft); }
.center { text-align: center; }
.stack > * + * { margin-top: var(--r-2); }
.stack-lg > * + * { margin-top: var(--r-4); }
.hidden { display: none !important; }