/* =====================================================================
   Shared design tokens for every app in this folder (Favorites, Places, …).
   Colors, spacing, sizes, and fonts live here; change a value once and every app follows.
   Load order in each app: tokens.css → components.css → the app's own stylesheet.
   ===================================================================== */
:root {
  /* ---- colors (Marquee: the theme with no data-theme) ---- */
  --bg: #0c0d12; --bg-2: #13151c; --panel: #181b24; --panel-2: #20242f;
  --line: rgba(255,255,255,.08); --text: #eef0f5; --text-2: #c9cdd8; --muted: #9097a8; --faint: #626a7d;
  --accent: #f5c518; --accent-ink: #1b1600;
  --accent-text: var(--accent);   /* the accent as a text color (links, on-state labels); a theme made from four colors keeps it readable (themes.js) */
  --score-keep: 100%; --score-toward: #fff;   /* rating colors as text: how much of the color stays, and what it's mixed with (themes.js works it out per theme) */
  --good-text: var(--good); --ok-text: var(--ok); --bad-text: var(--bad);   /* the status colors as text (Delete, errors, warnings); the colors themselves are also fills under white text */
  --great: #f5c518; --good: #3ecf8e; --ok: #f0a33c; --bad: #ef5a5a;
  --glow-1: color-mix(in srgb, var(--accent) 7%, transparent);     /* page background glows */
  --glow-2: rgba(120,90,255,.08);
  --sunken: rgba(0,0,0,.15);
  --shadow: 0 20px 50px rgba(0,0,0,.45);
  color-scheme: dark;

  /* ---- type ---- */
  --font: Inter, system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --mono: ui-monospace, Consolas, monospace;
  /* ---- text: 8 sizes, 4 weights (400 body, 500 controls, 600 titles and labels, 700 numbers), 3 families.
     Use only these. Each size includes --fs, so Appearance → Font size scales them all. ---- */
  --text-2xs: calc(11.5px * var(--fs, 1));   /* UPPERCASE labels, axis ticks */
  --text-sm: calc(13px * var(--fs, 1));      /* secondary: meta lines, chips, hints, field labels, small buttons */
  --text-md: calc(14px * var(--fs, 1));      /* controls: buttons in toolbars, menu items, list rows */
  --text-base: calc(15px * var(--fs, 1));    /* body */
  --text-lg: calc(18px * var(--fs, 1));      /* values and sub-titles: score boxes, small stat numbers, dialog sub-sections */
  --title: calc(22px * var(--fs, 1));        /* serif titles: brand, dialogs, sections, empty states */
  --title-lg: calc(28px * var(--fs, 1));     /* serif headlines: list tabs, page titles */
  --number: calc(44px * var(--fs, 1));       /* big stat numbers */
  --tracking-caps: .08em;  /* letter-spacing for UPPERCASE labels */

  /* ---- spacing scale ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px;

  /* ---- corners: four steps + pill; something inside a padded box uses the step below it ---- */
  --radius-xs: 4px;        /* small bits: thumbnails, tags, code, swatches, chart bars */
  --radius-sm: 8px;        /* controls: buttons, fields, icon buttons, menu items, list rows */
  --radius-md: 12px;       /* cards: posters, tiles, item cards, toast */
  --radius-lg: 16px;       /* surfaces: panels, menus, pop-overs, calendar, dialogs, stat tiles */
  --radius-pill: 999px;    /* segmented controls, search, chips */

  /* ---- surfaces, shadows, and motion ---- */
  --scrim: rgba(10,10,14,.82);                     /* dark backing for text and badges laid over a picture */
  --shadow-card: 0 8px 24px rgba(0,0,0,.35);       /* a card or poster at rest */
  --shadow-card-hover: 0 22px 40px rgba(0,0,0,.55);/* …lifted on hover */
  --shadow-card-quiet: 0 1px 2px rgba(0,0,0,.18), 0 2px 5px rgba(0,0,0,.12); /* opt-in, independent of raised hover */
  --control-hover: color-mix(in srgb, currentColor 10%, transparent);
  /* the one strike-through (done to-dos, old prices, sold-out chips): a 1.3px line with round tips, .07em below the
     middle of the capitals. --strike-cap is where that middle sits below the top of an Inter text box (ascent .969em,
     capitals .727em). Drawn by .strike in components.css. */
  --strike-width: 1.3px;
  --strike-drop: .07em;
  --strike-cap: .605em;
  --completed-line-width: var(--strike-width);     /* old name, kept for the planner */
  --glass-lift: 0 -2px;                            /* the optional hover lift for glass (data-glass-lift): a translate, so a press can still sink it */
  --lift: translateY(-6px);                        /* the hover lift for cards and posters. No scale: scaling a picture resamples it, which visibly softens it on 1x screens */
  --ease: cubic-bezier(.2,.8,.2,1);                /* anything that moves */
  /* motion: try these live in the style guide's Motion playground (Buttons) */
  --motion-slide: .28s;     /* a highlight or knob sliding to its new place: segmented controls, switches */
  --press-scale: .94;       /* a glass or solid button while it's pressed (icons in a group go .06 further) */
  --pop-scale: 1.3;         /* a toggle icon turning on: how far it grows… */
  --pop-dur: .34s;          /* …and how long the pop takes (turning off settles in 3/4 of that) */
  --ripple-dur: .55s;       /* the press ripple: how long the wave takes to spread out on release… */
  --ripple-strength: .18;   /* …how strong it starts… */
  --ripple-dent: .98;       /* …how far the surface sinks while held… */
  --press-tilt: 4deg;       /* …how far it tips toward where you press… */
  --press-spring: 1.025;    /* …and how far it springs past its size when let go */
  --hover-dur: .15s;        /* hover highlights fading in */
  --lift-dur: .25s;         /* a card or poster lifting on hover (with its shadow) */
  --fill-dur: .4s;          /* a progress bar filling to its new width */
  --menu-dur: .16s;         /* a menu or drop-down list dropping open from its button */
  --drawer-dur: .28s;       /* the side drawer sliding in (it slides out in 70% of that) */
  --accent-soft: color-mix(in srgb, var(--accent) 8%, transparent);    /* fill of a pressed / selected control */
  --accent-line: color-mix(in srgb, var(--accent) 50%, transparent);   /* its border; also field focus */

  /* ---- layout ---- */
  --topbar-pad-y: 14px; --topbar-pad-x: 28px; --topbar-gap: 14px;
  --topbar-h: 71px;        /* the top bar's height on every page, whatever is in it (it can grow when it wraps) */
  --page-pad-x: 28px;      /* side padding of page content, lined up with the top bar */
  --brand-size: 34px;      /* the square logo in the top bar */
  /* the size scale: every control, box, and hover highlight is one of these (labs/size-lab). Named like --space-*. */
  --size-1: 16px; --size-2: 20px; --size-3: 24px; --size-4: 28px; --size-5: 32px; --size-6: 36px; --size-7: 40px; --size-8: 52px;
  --bar-h: var(--size-7);  /* search and segmented: 40 (a place that wants them smaller can set 36) */
  --tool-h: var(--size-6); /* toolbar buttons and drop-down boxes (.tool: Filter, Sort, All genres): 36 */
  /* icon sizes, picked by the height of the control the icon is in (DESIGN.md, "Icon sizes"):
     control      28   32   36   40   52
     on its own   16   20   20   20   28
     beside text  14   14   16   16   20 */
  --icon-xs: 14px; --icon-sm: 16px;
  --icon: 20px;            /* UI icons on their own */
  --icon-lg: 28px;
  --circle-grow: 1.1;      /* a circle looks smaller than a square of the same width, so every circle that frames something
                              (a round checkbox, a round icon button, a rating badge, the circle in info or plus-circle) is drawn
                              10% wider than its square would be. What's inside it keeps its size, and so does its place in the
                              layout: the circle reaches 5% past its slot on each side (components.css, icons.js CIRCLE_R). */
  --osb-gutter: 16px;      /* space kept clear on the right of any scrolling box; its floating scroll bar sits there */
  --page-fade: 26px;       /* the faint blur along the bottom of the window on pages that scroll */
  --box-fade: 16px;        /* the fade at the bottom of a scrolling box (a menu, a list) */
  /* dialogs come in three widths, the same in every app: .modal.small (a quick question, a short add),
     .modal (a form: most dialogs), .modal.wide (a page of its own: a recipe, a title, an item) */
  --dialog-sm: 440px;
  --dialog-w: 640px;
  --dialog-lg: 960px;
  --sidenav-w: 250px;      /* the side navigation column (sidenav.js) */
  --drawer-w: 300px;       /* the side drawer (drawer.js), never wider than the screen less 56px */
  --fab-size: var(--size-8);   /* the floating plus (.fab), 52 */
  --fab-gap: 24px;         /* …how far in from the corner it floats (16px on a phone) */
  --fab-room: calc(var(--fab-size) + var(--fab-gap) * 2);   /* …and what a list under it keeps clear at its end */
}
@media (max-width: 760px) {
  :root { --topbar-pad-y: 12px; --topbar-pad-x: 16px; --page-pad-x: 16px; --fab-gap: 16px; }
}

/* ===== color schemes: each only swaps color tokens ===== */
:root[data-theme="midnight"] {
  --bg: #0b1120; --bg-2: #0f172a; --panel: #141d33; --panel-2: #1b2540;
  --line: rgba(160,185,235,.12); --text: #e8eefb; --text-2: #c5d0e6; --muted: #8e9cb8; --faint: #5d6b88;
  --accent: #5b9dff; --accent-ink: #061226;
  --great: #f4c95d; --good: #4ade9a; --ok: #f5a65b; --bad: #f47272;
  --glow-1: rgba(91,157,255,.10); --glow-2: rgba(120,110,255,.07);
}
:root[data-theme="slate"] {
  --bg: #0e1014; --bg-2: #13161b; --panel: #191d24; --panel-2: #1f242c;
  --line: rgba(255,255,255,.085); --text: #eceff4; --text-2: #c9ced8; --muted: #9098a6; --faint: #626a78;
  --accent: #6ea8fe; --accent-ink: #08142a;
  --great: #f4c95d; --good: #4ade9a; --ok: #f5a65b; --bad: #f47272;
  --glow-1: rgba(110,168,254,.05); --glow-2: transparent;
}
:root[data-theme="deepsea"] {
  --bg: #07131a; --bg-2: #0b1a22; --panel: #0f232d; --panel-2: #12303a;
  --line: rgba(150,220,230,.11); --text: #e4f1f4; --text-2: #bfd6dc; --muted: #86a4ad; --faint: #55727b;
  --accent: #2dd4bf; --accent-ink: #022320;
  --great: #f4c95d; --good: #5eead4; --ok: #f5a65b; --bad: #f47272;
  --glow-1: rgba(45,212,191,.09); --glow-2: rgba(56,130,246,.08);
}
:root[data-theme="indigo"] {
  --bg: #0d0c1f; --bg-2: #121129; --panel: #191736; --panel-2: #221f45;
  --line: rgba(180,170,255,.13); --text: #ecebfb; --text-2: #cbc8ea; --muted: #9a96c2; --faint: #68648f;
  --accent: #8b82ff; --accent-ink: #0d0a2b;
  --great: #f4c95d; --good: #4ade9a; --ok: #f5a65b; --bad: #f47272;
  --glow-1: rgba(139,130,255,.13); --glow-2: rgba(91,157,255,.07);
}
:root[data-theme="daylight"] {
  color-scheme: light;
  --bg: #f3f5f9; --bg-2: #fafbfd; --panel: #ffffff; --panel-2: #e9edf4;
  --line: rgba(20,35,70,.12); --text: #141a26; --text-2: #2f3a4d; --muted: #5d6880; --faint: #8f99ad;
  --accent: #2563eb; --accent-ink: #fff;
  --accent-text: #2159d4;         /* a step darker than --accent: 4.5:1 also on a selected chip's tint */
  --score-keep: 62%; --score-toward: #000;
  --great: #b7791f; --good: #15803d; --ok: #c2570c; --bad: #c62828;
  --glow-1: rgba(37,99,235,.06); --glow-2: rgba(99,102,241,.05);
  --sunken: rgba(20,35,70,.035);
  --shadow: 0 18px 40px rgba(20,35,70,.16);
}

/* Quiet elevation stays restrained on light surfaces; existing card shadows are unchanged. */
:root[data-light] { --shadow-card-quiet: 0 1px 2px rgba(0,0,0,.10), 0 2px 5px rgba(0,0,0,.06); }