/* Screenshot Shelfy - design tokens, Night Gallery (Sal's choice 2026-10-09).
   Source: docs/design/direction-night-gallery.md + docs/design/prototype-night-gallery.html.
   iOS dark system palette: black canvas, grouped cells, white ink with alpha greys.
   Colour = meaning: category colours only on dots/labels; blue only for links and the primary action.
   Plain CSS, no build step. */

/* ---- Fonts. System font first (SF on iPhone, Roboto on Android, Segoe on Windows); IBM Plex Sans
   Arabic (self-hosted, SIL OFL 1.1, app/fonts/LICENSE-*.txt) so Arabic never falls back to a random face. ---- */
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root {
  color-scheme: dark;

  /* ---- Type ---- */
  --font-ui: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, Inter, "Plex Arabic", sans-serif;
  --font-arabic: "Plex Arabic", system-ui, sans-serif;
  --large-title: 800 2.125rem/1.05 var(--font-ui);   /* 34px */
  --tracking-large: -0.025em;
  --title-2: 800 1.625rem/1.12 var(--font-ui);       /* 26px sheet title */
  --tracking-title: -0.02em;
  --body: 400 0.96875rem/1.5 var(--font-ui);         /* 15.5px */
  --caption: 500 0.8125rem/1.3 var(--font-ui);       /* 13px */
  --footnote: 400 0.78125rem/1.3 var(--font-ui);     /* 12.5px */
  --section: 600 0.75rem/1 var(--font-ui);           /* 12px uppercase card headers */

  /* ---- Surfaces (iOS dark) ---- */
  --bg: #000;
  --sheet-bg: #0b0b0c;
  --cell: #1c1c1e;
  --cell-2: #2c2c2e;
  --cell-3: #3a3a3c;
  --fill: rgba(118, 118, 128, 0.24);   /* segmented control track */
  --ink: #fff;
  --ink-2: rgba(235, 235, 245, 0.6);   /* secondary label */
  --ink-3: rgba(235, 235, 245, 0.3);   /* tertiary label */
  --ink-body: #e5e5ea;
  --ink-ocr: #d1d1d6;
  --sep: rgba(84, 84, 88, 0.6);
  --tint: #0a84ff;                     /* links + primary action only */
  --tint-soft: rgba(10, 132, 255, 0.15);
  --new: rgba(10, 132, 255, 0.85);
  --danger: #ff453a;
  --glass: rgba(30, 30, 32, 0.62);
  --glass-solid: #1c1c1e;
  --glass-edge: rgba(255, 255, 255, 0.13);
  --scrim: #000;

  /* ---- Category colours: iOS dark system colours, dots/labels ONLY (app/ui/model.mjs mirrors these) ---- */
  --cat-book: #ff9f0a;
  --cat-film_tv: #bf5af2;
  --cat-music: #ff375f;
  --cat-quote: #ffd60a;
  --cat-link_article: #7d7aff;
  --cat-product: #64d2ff;
  --cat-place: #30d158;
  --cat-other: #98989d;

  /* ---- Shape, space, targets ---- */
  --r-tile: 16px;
  --r-row: 12px;
  --r-card: 14px;
  --r-sheet: 28px;
  --r-thumb: 10px;
  --gutter: 16px;
  --gap: 8px;
  --tap: 44px;

  /* ---- Motion. Gesture-driven motion is a JS spring (app/ui/spring.mjs), not a CSS transition. ---- */
  --press-scale: 0.97;
  --press-dur: 100ms;
  --fade-dur: 180ms;
  --spring-open: 0.42;   /* response, seconds, damping 1.0 */
  --spring-close: 0.36;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --press-scale: 1; --press-dur: 0ms; --fade-dur: 0ms; }
}

@media (prefers-reduced-transparency: reduce) {
  :root { --glass: var(--glass-solid); }
}