/* Panel-Sync Demo — Diplomacy Music Theme */
/* "Film Grain · Sans" brand identity: ink + film-grain, bone text, desaturated
   cyan for UI actions AND the brand mark (orange retired 2026-07-19). Var-name contract is
   unchanged from the prior theme so the player/library/chapters and the six
   partner themes are unaffected — only the values changed. */

:root {
  /* Core palette */
  --color-bg:            #16120E;
  --color-surface:       #211B14;
  --color-surface-hover: #2B241B;
  --color-accent:        #86A9AF;
  --color-accent-dim:    #5E7A80;
  --color-text:          #F4ECDD;
  --color-text-muted:    #c9b9a0;
  --color-text-secondary:#8f8471;
  --color-panel-bg:      #141210;
  --color-divider:       #352E24;

  /* Scrubber — cyan family */
  --color-scrubber-bg:     #352E24;
  --color-scrubber-fill:   #86A9AF;
  --color-dot-active:      #86A9AF;
  --color-dot-visited:     #5E7A80;
  --color-dot-upcoming:    #352E24;

  /* Controls */
  --color-controls-bg:     rgba(20, 18, 16, 0.18);
  --color-button:          #F4ECDD;
  --color-button-hover:    #86A9AF;
  --color-play-bg:         #86A9AF;
  --color-play-fg:         #16120E;

  /* Typography — Film Grain · Sans */
  --font-display:  'Chivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-ui:       'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-caption:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Diplomacy-only brand tokens. Every consumer OUTSIDE this file MUST carry a
     fallback, since the six partner themes don't define these. */
  --brand-orange:          #86A9AF;   /* now cyan — the brand mark (name kept for the var-contract) */
  --brand-fill-opacity:    0.36;
  --brand-fill-peak:       0.52;   /* heartbeat overshoot above the 0.36 rest */
  --font-mono:             'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display-weight:   300;
  --font-display-tracking: 0.26em;

  /* Layout */
  --border-radius:    8px;
  --border-radius-sm: 4px;
  --header-height:    48px;
  --controls-height:  180px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-medium: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.light-mode {
  /* Pure white grounds (pre-rebrand values): comic page art is white, so any
     warm-paper tint reads as a band where UI meets art. Brand warmth stays a
     dark-mode treatment; light mode must be seamless white. */
  --color-bg:            #FFFFFF;
  --color-surface:       #F4F1EC;
  --color-surface-hover: #E6E1D8;
  --color-accent:        #356970;   /* brand's darker cyan on light grounds */
  --color-text:          #1B1A18;
  --color-text-muted:    #4A463F;
  --color-text-secondary:#7A766E;
  --color-panel-bg:      #FFFFFF;
  --color-divider:       #D9D3C6;
  --color-controls-bg:   rgba(244, 241, 236, 0.30);
}

/* Film-grain overlay — auto-applies only under the diplomacy theme (this file is
   swapped out for the partner themes, so the rule cannot leak). Fixed, non-
   interactive, above surfaces but below modal chrome. Hidden in light mode. */
body::after {
  /* Overshoot: iOS dynamic toolbars / safe areas must never expose the seam. */
  content: '';
  position: fixed;
  inset: -15vh -10vw;
  pointer-events: none;
  z-index: 2;
  opacity: .07;
  background-size: 300px 300px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.light-mode::after { display: none; }