/*
 * ABN Design Tokens — single source of truth for tokens shared across apps.
 *
 * Loaded by every iframe app (shotlist, calendar, locationmap, and every
 * future app class). Change a value here and it propagates everywhere.
 *
 * App-specific tokens (e.g. event category colors, cast colors) stay in
 * each app's own :root block and may override these if needed.
 *
 * The React portal shell (src/styles/globals.css) mirrors these values.
 * Keep them in lock-step when editing.
 */
@import url('https://use.typekit.net/edw1swl.css'); /* licensed Helvetica (helvetica-neue-lt-pro) */

:root {
  /* Surfaces */
  --bg: #fafafa;
  --surface: #fff;
  --surface-hover: #f5f5f5;
  --surface-active: #f0f0f0;

  /* Lines */
  --border: #e0e0e0;
  --border-light: #eee;
  --border-strong: #ccc;

  /* Text */
  --text: #111;
  --text-secondary: #666;
  --text-muted: #999;

  /* Accent (primary action color) */
  --accent: #111;

  /* Geometry */
  --radius: 0px;

  /* Typography */
  --font-ui: 'helvetica-neue-lt-pro', 'Helvetica Neue', Helvetica, sans-serif;
  --font-size-body: 13px;

  /* ============================================================
     GLASS MATERIAL — the ABN surface language (single source of truth).

     Two materials, Apple-style restraint:
       · GLASS  — translucent, heavily blurred panes for CHROME:
                  dialogs, popovers, menus, tooltips, buttons, chips.
       · INK    — solid near-black pills/banners for primary actions
                  and structural rows (category banners, totals bars).
     CONTENT (table cells, event pills, cards, data) stays opaque —
     glass is for chrome, never for data.

     Rules of the material:
       · fills are transparency + blur, not white paint
       · one top-lit hairline rim (inset highlight), no glare streaks
       · tight soft shadows — contact line + a single bloom
       · pill radius for actions, 16–24px for surfaces
     New components should consume these tokens (or the .abn-glass*
     classes in app-shell.css) rather than restating values.
     The portal mirrors these in src/styles/globals.css — keep in step.
     ============================================================ */
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0.48));
  --glass-bg-elevated: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.78));
  --glass-blur: blur(36px) saturate(1.8);
  --glass-blur-soft: blur(16px) saturate(1.5);
  --glass-rim: inset 0 1px 0.5px rgba(255, 255, 255, 0.85), inset 0 -0.5px 0.5px rgba(0, 0, 0, 0.04);
  --glass-border: 1px solid rgba(255, 255, 255, 0.65);
  --glass-border-edge: rgba(17, 17, 17, 0.08);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 18px rgba(0, 0, 0, 0.05);
  --glass-shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 22px rgba(0, 0, 0, 0.07);
  --glass-radius: 24px;
  --glass-radius-pop: 16px;
  --glass-radius-field: 14px;
  --glass-pill-bg: rgba(255, 255, 255, 0.55);
  --glass-pill-bg-hover: rgba(255, 255, 255, 0.85);
  --glass-pill-border: rgba(17, 17, 17, 0.10);
  --glass-pill-rim: inset 0 1px 0.5px rgba(255, 255, 255, 0.75);
  --glass-pill-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  --ink-bg: linear-gradient(180deg, #2c2c2e, #141416);
  --ink-rim: inset 0 1px 0.5px rgba(255, 255, 255, 0.22);
  --ink-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  --overlay-dim: rgba(17, 17, 17, 0.28);
  --overlay-blur: blur(5px);

  /* ── POPUP — the one recipe every floating popup shares ──────────────
     The account editor is the reference. Same translucent fill as
     --glass-bg (rgba .60→.48) under a heavy blur; white copy because a
     popup always sits over the dim overlay. Fields inside stay light with
     dark text. Every modal/overlay across the site derives from these so
     the recipe is identical top-down. */
  --pop-bg: var(--glass-bg);
  --pop-blur: var(--glass-blur);
  --pop-rim: var(--glass-rim);
  --pop-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 12px 40px rgba(0, 0, 0, 0.12);
  --pop-radius: 28px;
  --pop-fg: #fff;
  --pop-fg-dim: rgba(255, 255, 255, 0.85);
  --pop-fg-faint: rgba(255, 255, 255, 0.7);
  --pop-field-bg: rgba(255, 255, 255, 0.5);
  --pop-field-bg-focus: rgba(255, 255, 255, 0.94);
}