/*
 * LiveWall — design tokens.
 *
 * THE single source of truth for colour, type, spacing, radius, shadow and timing.
 * Values are taken verbatim from design_handoff_livewall/README.md.
 *
 * The rule that makes per-event theming work (needs 3-6): per-event settings may change
 * ONLY tokens — never component CSS. An event that wants terracotta instead of champagne
 * sets --accent; an event that wants a different display face sets --font-display. No
 * component stylesheet is ever edited for an event.
 *
 * Light theme = guest phone + wall. Dark theme = admin + moderation.
 */

:root {
  /* ---------------------------------------------------------------------
   * Typography
   * Both families are overridable per event.
   * ------------------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------------------------------------------------------------------
   * Light theme — guest + wall
   * ------------------------------------------------------------------- */
  --accent:   #B08D57;   /* event accent; default champagne/gold. Set per event. */
  --bg:       #FBF7F0;   /* the phone's surface */
  --bg-warm:  #F6EFE3;   /* header gradient, top */
  --surface:  #FFFDF9;   /* inputs, cards */
  --surface-2: #F3EADC;  /* the photo-upload icon tile */
  --border:   #E3D9C9;   /* field edges, dashed edges */
  --text:     #2E2A26;   /* primary text */
  --text-2:   #5C5449;   /* secondary */
  --text-3:   #8B8073;   /* labels, metadata */
  --text-4:   #A29585;   /* helper text */
  --text-5:   #B0A594;   /* the GDPR line */

  /* Accent options offered in the event picker. */
  --accent-champagne:  #B08D57;
  --accent-taupe:      #8C7A6B;
  --accent-terracotta: #9A6A5A;
  --accent-sage:       #6E7B6B;

  /* Wall surfaces. The gradient shows when an event has no images (with the monogram).
     The scrim sits over the photo so text stays readable whatever the photo is. */
  --wall-gradient: radial-gradient(120% 90% at 20% 15%, #FCF8F1 0%, #F1E7D8 45%, #E6D8C3 100%);
  --wall-scrim: linear-gradient(180deg,
                  rgba(40, 34, 26, .26) 0%,
                  rgba(40, 34, 26, 0)   32%,
                  rgba(40, 34, 26, .44) 76%,
                  rgba(40, 34, 26, .66) 100%);
  --wall-text:    #FFFDF9;
  --wall-text-90: rgba(255, 253, 249, .9);    /* monogram */
  --wall-text-82: rgba(255, 253, 249, .82);   /* sender name */
  --wall-text-66: rgba(255, 253, 249, .66);   /* subtitle */

  /* ---------------------------------------------------------------------
   * Dark theme values — admin + moderation.
   * Kept on :root so a dark surface can be nested anywhere without re-declaring.
   * ------------------------------------------------------------------- */
  --d-accent:   #C9A66B;   /* lighter than the light-theme accent, for dark backgrounds */
  --d-bg:       #0F0E0D;
  --d-panel:    #171614;
  --d-panel-2:  #1B1A17;
  --d-panel-3:  #100F0E;
  --d-border:      rgba(244, 240, 233, .09);
  --d-border-row:  rgba(244, 240, 233, .06);
  --d-border-btn:  rgba(244, 240, 233, .14);
  --d-border-dash: rgba(244, 240, 233, .16);
  --d-text:     #F4F0E9;
  --d-text-2:   #CFC8BD;
  --d-text-3:   #9A9287;
  --d-text-4:   #7E766A;
  --d-text-5:   #6E675C;
  --d-text-disabled: #5F594F;

  --warn:      #E0A05A;   /* profanity flag */
  --warn-on:   #2A1D12;
  --danger:    #E05A4A;   /* on-air dot, reject hover */
  --danger-on: #F0BDB5;
  --ok:        #7FB069;   /* status "Live" */

  /* ---------------------------------------------------------------------
   * Spacing scale
   * ------------------------------------------------------------------- */
  --s-1:  4px;   --s-2:  6px;   --s-3:  8px;   --s-4: 10px;
  --s-5: 14px;   --s-6: 18px;   --s-7: 22px;   --s-8: 26px;
  --s-9: 30px;   --s-10: 40px;  --s-11: 48px;  --s-12: 56px;  --s-13: 72px;

  /* ---------------------------------------------------------------------
   * Radius
   * ------------------------------------------------------------------- */
  --r-wall:    6px;    /* the wall frame */
  --r-sm:     10px;    /* small buttons */
  --r-btn:    11px;
  --r-input:  14px;    /* inputs, medium */
  --r-md:     12px;
  --r-card:   15px;    /* cards */
  --r-lg:     16px;    /* primary button */
  --r-panel:  18px;
  --r-screen: 33px;    /* phone screen */
  --r-phone:  44px;    /* phone frame */
  --r-pill:  999px;

  /* ---------------------------------------------------------------------
   * Shadows
   * ------------------------------------------------------------------- */
  --shadow-btn:        0 12px 26px -14px rgba(176, 141, 87, .9);
  --shadow-panel:      0 30px 70px -30px rgba(46, 42, 38, .55);
  --shadow-panel-dark: 0 40px 80px -40px #000;
  --shadow-wall:       0 30px 70px -34px rgba(46, 42, 38, .5);

  /* ---------------------------------------------------------------------
   * Motion
   * Hover and focus change edges and brightness only — never position.
   * ------------------------------------------------------------------- */
  --t-hover:   150ms;
  --t-state:   200ms;
  --t-form:    .4s;    /* form fading out */
  --t-receipt: .5s;    /* receipt fading in */
  --t-wall:    1.2s;   /* greeting + image cross-fade; never a hard cut */
}

/*
 * Dark surfaces map the d-* tokens onto the neutral names, so a component can be written
 * once against --bg / --text / --accent and work on either theme.
 */
[data-theme="dark"] {
  --accent:  var(--d-accent);
  --bg:      var(--d-bg);
  --surface: var(--d-panel);
  --border:  var(--d-border);
  --text:    var(--d-text);
  --text-2:  var(--d-text-2);
  --text-3:  var(--d-text-3);
  --text-4:  var(--d-text-4);
  --text-5:  var(--d-text-5);
}

/* Respect a guest who has asked their phone to reduce motion: the Ken Burns drift and the
   cross-fades are decorative, and the wall must never become unreadable because of them. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-wall: 1ms;
  }
}