/* ASai home — "Museum" shell + "Prism" app scenes.
   Source of truth: design-systems/home.html (v1.0, 2026-09-28). Motion rules: docs/motion-continuity.md.
   The page has no brand accent: colour on the home page comes only from the apps inside their scenes. */
:root {
  /* Gallery neutrals (light is fixed by the use scene: a lit gallery, not a theme toggle) */
  --wall: #F2F2F0;
  --floor: #E7E7E3;
  /* the generated gallery (A1/A2) is not colour-graded — the CSS fallback follows its real tones (npm run media prints them) */
  --gallery-wall: #DDDBD8;  --gallery-floor: #CDCAC4;            /* 16:9 */
  --gallery-wall-p: #DFDDD9; --gallery-floor-p: #D3D0CC;          /* 9:16 */
  /* bottom-edge tone of each 9:16 still (measured): the page under Safari's floating bars takes the colour of the scene above it */
  --under-gallery: #D0CDC9; --under-bill-swiper: #1C0B35; --under-bill-swiper-warm: #EDDED0;
  --under-spendr: #362B2D; --under-rent-assistance: #354868;
  /* shared components (/shared/contact.css, /shared/consent.css) in the home style */
  --contact-surface: var(--passe-partout); --contact-text: var(--ink); --contact-sub: var(--ink-2); --contact-radius: var(--r-control);
  --contact-field: var(--passe-partout); --contact-field-line: var(--rule); --contact-field-radius: var(--r-control); --contact-focus: var(--focus); --contact-shadow: var(--shadow-object);
  --ink-on-gallery: #4A4A46;   /* small text on the gallery floor: 5.5:1 (ink-2/ink-3 fall below 4.5 there) */
  --passe-partout: #FBFBF9;
  --ink: #1C1C1C;          /* 15.2:1 on wall */
  --ink-2: #5E5E5A;        /* 5.8:1 on wall — body */
  --ink-3: #65655F;        /* ≥4.7:1 on wall and floor — meta, captions */
  --rule: #8C8C86;         /* decorative only: hairlines, never text */
  --line: rgba(28, 28, 28, .12);
  --cta: #1C1C1C;
  --cta-hover: #34342F;
  --on-cta: #FFFFFF;
  --focus: #1C1C1C;        /* 2px ring + 2px wall offset */

  /* One light model for the whole site: key light top-left at 30°, shadows fall down-right */
  --shadow-object: 18px 36px 60px -24px rgba(28, 28, 28, .35), 4px 8px 16px -6px rgba(28, 28, 28, .18);
  --shadow-frame: 14px 40px 80px -40px rgba(28, 28, 28, .35);
  --light-wash: linear-gradient(150deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 55%);
  --grain-opacity: .035;   /* dithering overlay on every gradient — no banding */

  /* Type */
  --font-display: 'Noto Serif Display', 'Times New Roman', serif;
  --display-stretch: 62.5%;
  --display-weight: 300;
  --font-ui: 'Onest', 'Segoe UI', Roboto, sans-serif;
  --fs-display-xl: clamp(48px, 7vw, 96px);  /* hero title */
  --fs-display-l: clamp(40px, 5vw, 72px);   /* scene title */
  --fs-lead: clamp(17px, 1.4vw, 20px);
  --fs-body: 16px;
  --fs-meta: 13px;
  --lh-display: 1.02;
  --lh-body: 1.55;

  /* Space: 8px base */
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px;
  --gutter: 48px;
  --maxw: 1440px;

  /* Shape */
  --r-control: 12px;
  --r-frame: 6px;
  --r-phone: 44px;
  --frame-mat: 12px;       /* passe-partout width around scene frames */

  /* Motion: ONE grammar for every scene (docs/motion-continuity.md) */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-micro: 120ms;      /* hover, press */
  --dur-short: 240ms;      /* UI state, focus */
  --dur-medium: 480ms;     /* placard reveal, screen morph */
  --dur-long: 900ms;       /* view transition into a landing */
  --scene-travel: 1;       /* scroll progress drives slab passage; no time-based autoplay */
}

@media (max-width: 760px) {
  :root { --gutter: 16px; --frame-mat: 8px; }
}