/* Google Font loader — must be first rule in stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Bebas%20Neue&family=Poppins%3Awght%40400%3B600%3B700&display=swap');

/* [TA:design] Dynamic design tokens — generated from settings.json */
:root {
  /* Colours */
  --clr-bg:         #080808;
  --clr-surface:    #111111;
  --clr-surface-2:  #1a1a1a;
  --clr-accent:     #7a1586;
  --clr-text:       #ffffff;
  --clr-text-muted: #888888;
  --clr-border:     rgba(255,255,255,0.07);
  --clr-logo:       #ffffff;
  --clr-header-bg:  color-mix(in srgb, #080808 10%, transparent);

  /* Typography */
  --font-display: 'Bebas Neue', 'Arial Black', sans-serif;
  --font-body:    'Poppins', system-ui, sans-serif;
  --base-font-size: 16px;
  --h1-size-min: 2.5rem;
  --h1-size-max: 6.25rem;
  --h2-size-min: 2rem;
  --h2-size-max: 3rem;
  --display-letter-spacing: 0.06em;
  --nav-letter-spacing:     0.08em;

  /* Header */
  --header-h:      56px;
  --header-blur:   11px;
  --header-opacity:0.1;

  /* Logo — word styling */
  --logo-w1-color:        #f9f6f6;
  --logo-w2-color:        #fffafa;
  --logo-w1-font:         var(--font-display);
  --logo-w2-font:         var(--font-display);
  --logo-w1-weight:       400;
  --logo-w2-weight:       400;
  --logo-w1-spacing:      0.08em;
  --logo-w2-spacing:      0.08em;
  --logo-w1-tilt:         0deg;
  --logo-w2-tilt:         0deg;
  /* Logo — layout */
  --logo-hero-layout:     column;
  --logo-hero-pos:        flex-start;
  /* Logo — sizes */
  --logo-hero-w1-size:    3.2rem;
  --logo-hero-w2-size:    2.9rem;
  --logo-header-w1-size:  1rem;
  --logo-header-w2-size:  1rem;
  /* Logo — solid border (no rainbow, width 0 = off) */
  --logo-w1-border-color:      #e91e8c;
  --logo-w2-border-color:      #e91e8c;
  --logo-hero-w1-border-width: 0px;
  --logo-hero-w2-border-width: 0px;
  --logo-hdr-w1-border-width:  0px;
  --logo-hdr-w2-border-width:  1.5px;
  /* Logo — background (transparent when opacity 0) */
  --logo-hero-bg:         color-mix(in srgb, #8f02b6 70%, transparent);
  --logo-header-bg:       color-mix(in srgb, #8f02b6 0%, transparent);
  /* Logo — glow spread */
  --logo-spread-size:     0px;
  --logo-spread-color:    #462601;
  --logo-border-width:    1.5px;
  /* Header bottom border */
  --header-border-thickness: 0.5px;
  --header-border-color:  color-mix(in srgb, #8f02b6 0%, transparent);
  --header-rainbow-opacity: 0;

  /* Reel */
  --reel-speed:           120s;
  --reel-item-height:     46vh;
  --reel-gap:             20px;
  --reel-tilt:            -10deg;
  --reel-perspective:     2000px;
  --reel-polaroid-border: 8px;
  --reel-polaroid-bottom: 28px;
  --reel-polaroid-color:  #ffffff;
  --reel-shadow:          0.55;

  /* Stats */
  --stats-glow:       0.35;
  --stats-value-size: 6rem;

  /* Visualiser */
  --viz-opacity: 0.35;

  /* Buttons */
  --btn-radius:   0px;
  --btn-px:       2.25rem;
  --btn-py:       0.85rem;
  --btn-fs:       0.82rem;

  /* Instagram embed */
  --ig-embed-width: 30%;

  /* Venue status indicator */
  --status-font-size:     0.68rem;
  --status-dot-size:      7px;
  --status-label-display: block;
  --status-time-display:  block;

  /* Drinks */
  --drink-icon-size: 30px;

  /* Features */
  --tick-size:    32px;
  --tick-delay:   110ms;
  --spotlight:    0.08;

  /* Effects */
  --h1-glow:      0.2;
  --stats-glow-i: 0.12;
  --feat-spot:    0.08;

  /* Shared */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.25s var(--ease);
  --rainbow: linear-gradient(90deg,
    #E40303 0%, #FF8C00 20%, #FFED00 38%,
    #008026 55%, #004DFF 75%, #750787 100%
  );
  --clr-map-filter: grayscale(20%) invert(90%) hue-rotate(180deg) brightness(0.85) contrast(0.9);
}