/* The Beneficiary: brand tokens. The only place colours, fonts, shadows and motion are defined.
   See BRAND.md for the rules. Never use a raw hex, shadow or duration outside this file. */

:root {
  /* Colour, taken from the building. All neutrals share one warm temperature so they blend. */
  --ink: #15120F;        /* lamp black, page background */
  --slate: #211D19;      /* warm slate, raised surfaces */
  --slate-2: #2D2823;    /* higher surfaces */
  --slate-3: #3A342E;    /* highest surfaces, hover */
  --stucco: #EEE7D8;     /* ground floor stucco, primary text and paper sheets */
  --stone: #B9B0A0;      /* stone capping, secondary text */
  --brick: #9E3F2B;      /* Flemish bond brick, brand colour, surfaces only */
  --brick-deep: #6F2A1D; /* brick in shadow */
  --candle: #E0A93B;     /* candlelight, actions only */

  /* Roles */
  --bg: var(--ink);
  --surface: var(--slate);
  --surface-raised: var(--slate-2);
  --surface-top: var(--slate-3);
  --text: var(--stucco);
  --text-muted: var(--stone);
  --brand: var(--brick);
  --action: var(--candle);
  --on-action: var(--ink);
  --hairline: rgba(238, 231, 216, 0.10);

  /* Light. One source, above. Shadows are ink tinted, never pure black.
     Each level is a tight contact shadow plus a wide soft one. */
  /* Layered in a doubling series (1, 2, 4, 8...) with the light above and slightly left,
     so the vertical offset is twice the horizontal. Each level adds one more layer. */
  --shadow-1: 0.5px 1px 1px rgba(8, 6, 4, 0.34), 1px 2px 2px rgba(8, 6, 4, 0.28);    /* buttons, chips */
  --shadow-2: 0.5px 1px 1px rgba(8, 6, 4, 0.30), 1px 2px 2px rgba(8, 6, 4, 0.26), 2px 4px 4px rgba(8, 6, 4, 0.22), 4px 8px 8px rgba(8, 6, 4, 0.20);   /* cards */
  --shadow-3: 0.5px 1px 1px rgba(8, 6, 4, 0.30), 1px 2px 2px rgba(8, 6, 4, 0.26), 2px 4px 4px rgba(8, 6, 4, 0.22), 4px 8px 8px rgba(8, 6, 4, 0.20), 8px 16px 16px rgba(8, 6, 4, 0.18), 16px 32px 32px rgba(8, 6, 4, 0.16);  /* hovered cards, menus */
  --shadow-4: 0.5px 1px 1px rgba(8, 6, 4, 0.30), 1px 2px 2px rgba(8, 6, 4, 0.26), 2px 4px 4px rgba(8, 6, 4, 0.22), 4px 8px 8px rgba(8, 6, 4, 0.20), 8px 16px 16px rgba(8, 6, 4, 0.18), 16px 32px 32px rgba(8, 6, 4, 0.16), 32px 64px 64px rgba(8, 6, 4, 0.16);  /* sheets, modals */
  --gilt: linear-gradient(140deg, rgba(224, 169, 59, 0.55), rgba(238, 231, 216, 0.10) 28%, rgba(238, 231, 216, 0.04) 62%, rgba(224, 169, 59, 0.28)); /* gilded edge on cards */
  --shadow-action: 0 1px 2px rgba(8, 6, 4, 0.60), 0 6px 22px rgba(224, 169, 59, 0.22); /* candle button */
  --top-light: inset 0 1px 0 rgba(238, 231, 216, 0.07); /* lit top edge on every raised surface */

  /* Candlelight pooling. Same hue as the surface it sits on, never a second colour. */
  --glow-candle: radial-gradient(ellipse at 50% 0%, rgba(224, 169, 59, 0.16), rgba(224, 169, 59, 0.05) 40%, transparent 70%);
  --fade-surface: linear-gradient(180deg, var(--slate) 0%, var(--ink) 100%);
  --fade-brick: linear-gradient(180deg, #A8452F 0%, var(--brick) 35%, var(--brick-deep) 100%);

  /* Motion. Transform, opacity and filter only. */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);            /* hover, press, general */
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);     /* things arriving */
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);      /* things leaving */
  --t-press: 100ms;
  --t-hover-in: 125ms;
  --t-hover-out: 300ms;
  --t-enter: 220ms;
  --t-exit: 160ms;
  --t-reveal: 450ms;   /* scroll reveal, fade only, once */
  --t-lights: 1400ms;  /* the house lights coming up, page load only */
  --t-mask: 600ms;     /* headline rising from behind its mask, page load only */
  --t-dolly: 700ms;    /* slow zoom on a photo under the cursor */
  --stagger: 40ms;

  /* Type */
  --font-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --font-text: "Libre Caslon Text", Georgia, serif;
  --font-ui: "Inter", system-ui, sans-serif;

  --type-micro: 500 11px/14px var(--font-ui);
  --type-caption: 400 12px/16px var(--font-ui);
  --type-ui: 500 14px/20px var(--font-ui);
  --type-button: 600 16px/24px var(--font-ui);
  --type-body: 400 17px/28px var(--font-text);
  --type-title: 400 28px/34px var(--font-display);
  --type-headline: 400 44px/48px var(--font-display);
  --type-display: 400 72px/72px var(--font-display);
  --type-hero: 400 clamp(52px, min(10vw, 15vh), 136px)/0.95 var(--font-display); /* the name, homepage only */

  /* Spacing, multiples of 4 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px;
  --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px;

  --radius: 2px; /* Georgian joinery is square. Keep corners near sharp. */
}