/* FluffCams sales site, design tokens (DESIGN-UPDATE.md section 2). Every colour, size and font of the new look is a variable here. */
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --bg: #09090B; --bg-band: #0C0C0F; --surface: #111114; --surface-2: #131316; --surface-3: #18181C; --surface-4: #1E1E23;
  --border: #222228; --border-2: #26262C; --border-3: #2E2E36; --border-strong: #34343C; --divider: #1F1F24;
  --text: #F4F4F5; --text-2: #D4D4D8; --text-3: #C4C4CC; --muted: #A1A1AA; --subtle: #8B8B94; --faint: #71717A;
  --accent: #C5F82A; --on-accent: #09090B;
  /* LIVE is always red with white text (owner rule; the mockup's pink is replaced by the script's LIVE red) */
  --live: #E5262B; --on-live: #FFFFFF;
  --font-display: 'Inter Tight', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace;
  --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px;
  --shadow-frame: 0 40px 100px rgba(0,0,0,.6); --shadow-float: 0 20px 50px rgba(0,0,0,.6);
  --container: 1200px; --gutter: 32px; --section-gap: 128px;
  --wrap: calc(var(--container) + 2 * var(--gutter)); /* the mockups size boxes without border-box: 1200 px of content plus the side padding */

  /* the mockups' remaining values, named once */
  --nav-bg: rgba(9,9,11,.86);
  --frame-border: #2A2A31; --frame-bar: #0E0E11; --frame-dot: #3A3A42; --frame-url: #1A1A1F;
  --bezel: #202026; --card-float: #17171B; --text-on-photo: #E4E4E7;
  --stream-bg: #2A1C24; --cam-bg: #1E2430;
  --photo-shadow: 0 1px 4px rgba(0,0,0,.6);
  --shade: rgba(0,0,0,.45); --shade-2: rgba(0,0,0,.5); --glass: rgba(9,9,11,.82); --glass-2: rgba(9,9,11,.85);
  --glass-line: rgba(255,255,255,.18); --photo-label: rgba(255,255,255,.45);
  --accent-12: rgba(197,248,42,.12); --accent-20: rgba(197,248,42,.2); --accent-35: rgba(197,248,42,.35); --accent-shadow: rgba(197,248,42,.08);
  --on-accent-2: #1F2410;
  --logo-lime: #A3E635; /* the approved logo's "Cams" colour (the flame's lime), never the button colour */
  /* the hero lighting of the earlier site (owner 2026-10-28: bring it back): lime and violet light behind the hero */
  --hero-light-1: rgba(197,248,42,.14); --hero-light-2: rgba(139,124,255,.16);
  --shadow-phone: 0 30px 80px rgba(0,0,0,.7); --shadow-tabs: 0 40px 120px rgba(0,0,0,.55); --shadow-row: 0 30px 90px rgba(0,0,0,.5);
  /* the script's own room and card colours (the default look), for the drawn product pictures */
  --room-bg: #1C1C1F; --room-panel: #232327; --room-line: #303036; --gold: #FFC428; --online: #22C55E;
  --card-pill: rgba(0,0,0,.55); --card-shade: rgba(0,0,0,.72); --card-show: rgba(110,140,10,.92);
  /* ready-made looks of the script shown on the customization page (examples of its 18 looks) */
  --lk-lime-bar: #0E0E11; --lk-lime-bg: #141712; --lk-lime-card: #26301A;
  --lk-red-bar: #1A0B0E; --lk-red-bg: #220F13; --lk-red-card: #4A1820; --lk-red-acc: #E11D2E;
  --lk-vio-bar: #120E1E; --lk-vio-bg: #171228; --lk-vio-card: #2E2450; --lk-vio-acc: #8B7CFF;
  /* the three look previews in the brand tile (examples of customer looks) */
  --pv1-bar: #0E0E11; --pv1-bg: #1A1218; --pv1-card: #3A1F2C; --pv1-accent: #FF3D7F;
  --pv2-bg: #141712; --pv2-card: #26301A;
  --pv3-bar: #FFFFFF; --pv3-ink: #09090B; --pv3-bg: #F1F2F6; --pv3-card: #D9DFF0; --pv3-accent: #3B6CF6; --pv3-line: #D4D4D8;
}