@import url('../fonts/fonts.css');

:root {
    /* surfaces */
    --color-bg: #fdf6ee;
    --color-surface: #fff;
    --color-surface-translucent: rgba(255, 255, 255, 0.85);
    --color-surface-soft: #fff9f4;
    --color-surface-alt: #faf5f0;
    --color-surface-hover: #f5ede3;
    --color-surface-tan: #f0e6d8;
    --color-surface-tan-hover: #e0d0c0;

    /* text */
    --color-text: #333;
    --color-text-secondary: #555;
    --color-text-muted: #888;
    --color-text-faint: #aaa;
    --color-text-subtle: #bbb;
    --color-text-disabled: #ccc;

    /* brand */
    --color-brand: #d7a97a;
    --color-brand-80: #d7a97a80;
    --color-brand-hover: #c4955f;
    --color-brand-dark: #7a5c3a;
    --color-brand-dark-soft: rgba(122, 92, 58, 0.12);
    --color-brand-muted: #a08868;
    --color-brand-soft: rgba(215, 169, 122, 0.14);
    --color-brand-heading: #a07850;

    /* event type colors */
    --color-pee: #b8a000;   
    --color-pee-dark: #7a6a00;
    --color-pee-bg: #fff176;
    --color-pee-bg-80: #fff17670;
    --color-pee-outside-bg: #79b5ec3d;
    --color-pee-outside-bg-80: #79b5ec80;
    --color-poo: #7a4a1e;
    --color-litterbox: #2e7d32;
    --color-litterbox-80: #2e7d3280;
    --color-outside: #a1642a;

    /* status greens */
    --color-green: #4caf50;
    --color-green-dark: #43a047;
    --color-green-border: #a5d6a7;
    --color-green-bg-hover: #e8f5e9;
    --color-green-bg-active: #c8e6c9;
    --color-green-bg-active-80: #c8e6c980;

    /* danger */
    --color-danger: #e55;

    /* badges */
    --color-badge-bg: #d4b896;
    --color-badge-text: #5a3a1a;

    /* calendar alert */
    --color-alert-bg: #fde8e8;
    --color-alert-bg-hover: #fad4d4;
    --color-cell-hover-bg: #faf0e6;

    /* overlays & shadows */
    --overlay-backdrop: rgba(0, 0, 0, 0.45);
    --shadow-black-06: rgba(0, 0, 0, 0.06);
    --shadow-black-08: rgba(0, 0, 0, 0.08);
    --shadow-black-10: rgba(0, 0, 0, 0.1);
    --shadow-black-15: rgba(0, 0, 0, 0.15);
    --shadow-black-18: rgba(0, 0, 0, 0.18);
    --shadow-black-22: rgba(0, 0, 0, 0.22);

    /* floating nav dimensions, shared so content clearance always matches the nav's real footprint exactly */
    --nav-offset-bottom: 1rem;
    --nav-height: 4.25rem;
    --nav-clearance: calc(var(--nav-offset-bottom) + var(--nav-height) + 0.75rem);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    background: var(--color-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1rem;
    padding-bottom: calc(var(--nav-clearance) + env(safe-area-inset-bottom)); /* ends a fixed 0.75rem above the floating nav's real height, never overlapping or leaving a large gap */
    color: var(--color-text);
}

/* log page only: fill the exact viewport so .history-cards scrolls internally instead of the whole page */
body.log-page {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    min-height: 0;
    padding-bottom: 0; /* .history-cards reserves its own nav clearance so content can flow behind the floating nav, like the chart page */
}

h1 {
    font-size: 1.8rem;
    margin-bottom: 0.25rem;
}

.subtitle {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}