/* Variables (design tokens), reset, body and general typography. */
:root {
    /* ---------- Colors: base ---------- */
    --ink: #2b2a4c;            /* Borders, shadows, main text */
    --mute: #5f5b80;           /* Muted text, placeholders, subtitles */
    --cream: #fbf3e4;          /* Page background */
    --white: #ffffff;          /* Compose card, search field, pills */

    /* ---------- Colors: accents ---------- */
    --lilac: #b6a6ff;          /* Sidebar background */
    --sun: #ffd166;            /* Active nav item, highlight marker, logo */
    --coral: #ff7a59;          /* Primary buttons */
    --mint: #7ad7c1;           /* Positive action (restore), pencil circle */
    --peach: #ff9f68;          /* Decorative circle in the sidebar */
    --danger: #c62f45;         /* Delete / delete forever */
    --title-accent: #d9381e;   /* Text inside the highlight marker (the user's name) */

    /* ---------- Colors: note cards (assigned in rotation) ---------- */
    --card-pink: #ffc4d6;
    --card-mint: #b5ecdf;
    --card-yellow: #ffe08a;
    --card-lilac: #d9ceff;
    --card-peach: #ffd2a8;
    --card-blue: #bfe3ff;

    /* ---------- Colors: misc ---------- */
    --dots: #2b2a4c26;         /* Background dot grid (ink at ~15% opacity) */
    --shadow-trash: #2b2a4c55; /* Lighter shadow for trash cards */

    /* ---------- Typography ---------- */
    --font-main: 'Segoe UI', system-ui, sans-serif;

    /* Sizes in rem, so they scale with the user's browser font setting.
       Minimum is 0.875rem (14px); nothing smaller is used. */
    --fs-sm: 0.875rem;   /* 14px - Pills, date tags, section labels */
    --fs-md: 1rem;       /* 16px - Body text, card text, buttons, nav, inputs */
    --fs-lg: 1.25rem;    /* 20px - Card titles, compose title */
    --fs-xl: 1.75rem;    /* 28px - Logo, empty state headline */
    --fs-h1: 2.75rem;    /* 44px - Page headline */

    --fw-regular: 500;   /* Body text */
    --fw-bold: 700;      /* Nav items, secondary emphasis */
    --fw-black: 900;     /* Headlines, buttons, pills */

    --ls-label: 2px;     /* Letter spacing for uppercase section labels */
    --ls-h1: -1.5px;     /* Letter spacing for the page headline */

    /* ---------- Borders ---------- */
    --border: 3px solid var(--ink);          /* Default border */
    --border-thick: 4px solid var(--ink);    /* Sidebar edge, decorative circles */
    --border-pill: 2px solid var(--ink);     /* Pills */
    --border-dashed: 3px dashed var(--ink);  /* Trash cards */

    /* ---------- Border radius ---------- */
    --radius-pill: 20px;       /* Pills, section labels */
    --radius-sm: 14px;         /* Buttons */
    --radius-md: 16px;         /* Nav items, search field, name marker */
    --radius-lg: 28px;         /* Note cards, compose card */
    --radius-xl: 36px;         /* Sidebar (right corners) */
    --radius-round: 50%;       /* Circles */

    /* ---------- Shadows (hard, no blur) ---------- */
    --shadow-pill: 2px 2px 0 var(--ink);     /* Action pills */
    --shadow-logo: 3px 3px 0 var(--ink);     /* Logo, pencil circle */
    --shadow-btn: 4px 4px 0 var(--ink);      /* Buttons, search field, active nav item */
    --shadow-btn-lg: 5px 5px 0 var(--ink);   /* "New note" button */
    --shadow-card: 7px 7px 0 var(--ink);     /* Note cards */
    --shadow-compose: 8px 8px 0 var(--ink);  /* Compose card, empty state circle */
    --shadow-card-trash: 7px 7px 0 var(--shadow-trash); /* Trash cards */

    /* ---------- Card rotation ---------- */
    --tilt-left: -1deg;        /* Every 3n+1 card */
    --tilt-right: 1deg;        /* Every 3n card */
}

* {
    box-sizing: border-box;
    margin: 0;
    scroll-behavior: smooth;
    font-family: var(--font-main);
}

a {
    text-decoration: none;
}

/* No animated scrolling for people who turned animations off in their system */
@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto;
    }
}

body {
    display: flex;
    gap: 40px;
    color: var(--ink);
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
}

input,
button {
    font-size: var(--fs-md);
    color: var(--ink);
}

button {
    cursor: pointer;
    font-weight: var(--fw-black);
}

.hidden {
    display: none;
}